我想实现一个计数计时器JS代码,在每个加载页面从0开始计数。我现在的代码是这样的:
var secondsTotal = 0;
setInterval(function() {
++secondsTotal;
var minutes = Math.floor(secondsTotal / 60);
var seconds = Math.floor(secondsTotal) % 60;
var milliseconds = Math.floor(secondsTotal) % 1000;
document.getElementById('counter').innerHTML = minutes + ":" + seconds + "." + milliseconds;
}, 1000);
输出格式应为:00:00.0
mm:ss.ms
那么,如何输出如上格式的结果(分钟和秒应该精确地以两位数格式打印)?
最佳答案
如果您想在每个页面上执行此操作,那么您就快完成了。现在,您的代码不允许您跟踪毫秒,因为您的 setInterval
每秒运行一次。我推荐的是这样的:
(function() {
var counter = 0,
cDisplay = document.getElementById("counter");
format = function(t) {
var minutes = Math.floor(t/600),
seconds = Math.floor( (t/10) % 60);
minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
cDisplay.innerHTML = minutes + ":" + seconds + "." + Math.floor(t % 10);
};
setInterval(function() {
counter++;
format(counter);
},100);
})();
这做了几件事让你的代码每秒运行 10 次:
- 输出元素
#counter
已缓存,不会在每次迭代时检索 - 格式仅保留算术运算 - 模数和除法。
现在还添加了前导零。
如果您想让此计数器逐页运行,请考虑使用 document.cookies
在页面之间传递最终值。
这是一个很好的第一个版本。但是,您可能想要:
- 暂停/重新启动计时器
- 重置计时器
- 有多个计时器
出于这个原因,我将添加上述代码的稍微复杂的形式,这将允许您管理多个计时器。这将利用一些面向对象的概念。我们将使用 TimerManager
对象来“托管”我们的计时器,每个 Timer
对象都会有一个指向管理器的链接。
这样做的原因是因为通过这种方式,每个计时器都将依赖于相同的 setInterval()
,而不是进行多个 setInterval()
调用。这可以让您减少浪费的时钟周期。
大约 5 分钟内即可了解更多内容!
关于javascript - 每页加载的计数计时器从 0 开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16838157/