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