Javascript中的持續進度條

Question

我正在嘗試找到創建簡單進度條的最佳選項，我需要在另一個JavaScript腳本中定期觸發。

每隔幾分鍾，一個計時器會導致進度條從0到100％開始。 一旦達到100％，條形將重置為0。

我正在嘗試實現一個流暢的動畫版本的酒吧，如下所示： http ： //www.webappers.com/progressBar/ 。 （我試着改編這個特別的但我無法按照我描述的方式工作）

我正在研究jQuery UI ProgressBar：是否可以按照我描述的方式使用它？

謝謝。

Answer 1

使用jQuery UI進度條可以很快完成，最初只需調用它：

$("#progressbar").progressbar({ value: 0 });

這可以在你的另一個腳本中，可能是通過setInterval() ：

var percentComplete = 40; //Get the percent
$("#progressbar").progressbar( { value: percentComplete } );

把它放在一起像這樣：

var percentComplete = 0; //Update this in your other script
$("#progressbar").data("progress", setInterval(function() {
  if(percentComplete == 100) {
    percentComplete = 0;
    clearInterval($("#progressbar").data("progress")); //Stop updating
  }
  $("#progressbar").progressbar( { value: percentComplete } );
}, 200));

動畫效果讓它看起來更平滑： 看這里的演示 。 在演示案例中，這是通過單個CSS規則完成的：

.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }