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

Javascript中的持续进度条

1 个答案: