javascript - 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));

动画效果也让它看起来更流畅:see here for a demo .在演示案例中，这是通过单个 CSS 规则完成的:

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