jQuery进度计时器栏

我在jQuery中有一个进度计时器栏 – 这是一个例子http://jsfiddle.net/6h74c/

如果我有时间值（以毫秒为单位）（600000 = 10分钟，300000 = 5分钟等），如何在该段时间内增加条形图？

在jsfiddle链接中，我正在尝试将进度条设置为增加835000ms。

但是，setTimeout（）决定了条形图增加的频率，它也是基于宽度百分比，这似乎不准确 – 我应该这样做吗？

function updateProgress(percentage) { $('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal $('#pbar_innertext').text(percentage + "%"); } function animateUpdate() { perc++; updateProgress(perc); if(perc < 835000) { timer = setTimeout(animateUpdate, 50); // probably not ideal either? } } 

Answer 1

小提琴示例

我会做的事情如下：

 var start = new Date(); var maxTime = 835000; var timeoutVal = Math.floor(maxTime/100); animateUpdate(); function updateProgress(percentage) { $('#pbar_innerdiv').css("width", percentage + "%"); $('#pbar_innertext').text(percentage + "%"); } function animateUpdate() { var now = new Date(); var timeDiff = now.getTime() - start.getTime(); var perc = Math.round((timeDiff/maxTime)*100); if (perc <= 100) { updateProgress(perc); setTimeout(animateUpdate, timeoutVal); } } 

Answer 2

只需做一些好的老式数学。 它看起来不对，因为你给宽度百分比作为“tick”的值，最终将是835000！ 这意味着你最终的宽度为“835000％”！

例

 var timer = 0, perc = 0, timeTotal = 835000, timeCount = 50; function updateProgress(percentage) { var x = (percentage/timeTotal)*100, y = x.toFixed(3); $('#pbar_innerdiv').css("width", x + "%"); $('#pbar_innertext').text(y + "%"); } function animateUpdate() { if(perc < timeTotal) { perc++; updateProgress(perc); timer = setTimeout(animateUpdate, timeCount); } } $(document).ready(function() { $('#pbar_outerdiv').click(function() { clearTimeout(timer); perc = 0; animateUpdate(); }); }); 

Answer 3

jsFiddle演示

描述

这只是每10毫秒增加一次进度…因为你知道它花费的时间，花费时间除以100，然后在var timer = setInterval(updateProgressbar, 10);中设置你的时间间隔var timer = setInterval(updateProgressbar, 10);

HTML

JS

 var progress = 0; var timer = setInterval(updateProgressbar, 10); function updateProgressbar(){ $("#progressbar").progressbar({ value: ++progress }); if(progress == 100) clearInterval(timer); } $(function () { $("#progressbar").progressbar({ value: progress }); }); 

---

JS小提琴只为你

JS

 var progress = 0; var timer = setInterval(updateProgressbar, 8350); function updateProgressbar(){ $("#progressbar").progressbar({ value: ++progress }); if(progress == 100) clearInterval(timer); } $(function () { $("#progressbar").progressbar({ value: progress }); }); 

Answer 4

你可能想要这样的东西：

 var currentTime = new Date().getTime(); perc = (currentTime - StarTime)/duration; 

如果像这样设置StartTime，则可以计算每次更新的百分比。