我的任务是制作一个进度条和一个进程持续时间计时器。所以,我没有三思而后行:
<div class="mainInfo">
<div id="timer"><span id="elapsedText">0:00</span>/<span id="durationText">3:00</span></div>
<div id="progressBar"><div id="progress" style="width:0;"></div></div>
</div>
和 JS:
var time = 1000;
var duration = 180;
var $progress = $("#progress");
var $elapsedText = $("#elapsedText");
updateTime();
function updateTime() {
var elapsed = time / 1000;
$elapsedText.text(Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60));
$progress.css('width', (elapsed * 100 / duration) + "%");
time = time + 1000;
setTimeout("updateTime()", 1000);
}
时间实际上是从另一个变量中检索的——这个用于演示(为了说明我实际上有以毫秒为单位的值)。
它有效(不仅在我的 PC 上),而且仍然有效,但是当这个周期运行时,procmon 在浏览器(chrome,ff)进程上显示 CPU 峰值 - 30-40% 而不是常规的 0.5%。
有没有更有效的方法来做到这一点?