Javascript中的持续进度条 [英] Continuous Progress Bar in Javascript

问题描述

我正在尝试找到创建简单进度条的最佳选项，我需要定期从另一个JavaScript脚本中触发。

I am trying to find the best option to create a simple progress bar that I need to be triggered periodically from within another JavaScript script.

每隔几分钟，计时器会导致进度条从0到100％开始。一旦达到100％，条形将重置为0.

Every few minutes, a timer would cause the progress bar to start going from 0 to 100%. Once it reaches 100%, the bar would reset to 0.

我正在尝试实现条形图的平滑动画版本，如下所示： http://www.webappers.com/progressBar/ 。 （我尝试调整这个特定的一个，但我无法按照我描述的方式工作）

I am trying to implement a smooth animated version of the bar, like this one: http://www.webappers.com/progressBar/. (I tried adapting this particular one but I could not get it to work the way I described)

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

I am looking into the jQuery UI ProgressBar: Is it possible to use it in the manner I have described?

谢谢。

推荐答案

这很快就可以了jQuery UI进度条，最初只是调用它：

This is pretty quick to do with the jQuery UI progress bar, just call this initially:

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

这在你的另一个脚本中，可能是通过 setInterval（）：

And this in your other script, probably via 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规则完成的，在演示案例中：

The animated effect keeps it a bit smoother looking as well: see here for a demo. This is done via a single CSS rule, in the demo case:

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

这篇关于Javascript中的持续进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！