Question

我想实现一个计数定时器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

毫米：ss.ms

那么，如何输出上述格式的结果（分钟和秒应该以两位数格式打印）？

Answer 1

如果你想每页一次，你几乎就在那里。现在，您的代码不允许您跟踪毫秒，因为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将最终值从页面传递到另一页。

Fiddle

这是一个很好的第一版。但是，您可能希望：

暂停/重新启动计时器
重置计时器
拥有多个计时器

出于这个原因，我将添加一个稍微复杂的上述代码形式，这将允许您管理多个计时器。这将使用一些OO概念。我们将使用TimerManager对象“托管”我们的计时器，每个Timer对象都有一个指向管理员的链接。

之所以这样，是因为每个计时器都依赖于相同的setInterval()这样做，而不是多次setInterval()次呼叫。这样可以减少浪费的时钟周期。

大约5分钟内有关于此的更多信息！

Answer 2

以这种方式计算秒数并不能保证准确。 setInterval方法可以根据JS引擎完成其他任务的能力而漂移。不确定你的用例是什么，例如你期望计算多长时间，但值得注意。有关详细说明，请参阅Will setInterval drift?。

我建议您查看momentjs插件@ http://momentjs.com/并将您的代码更新为以下内容

var startTime = moment();
var el = document.getElementById('counter');
setInterval(function() {
      var ms = moment().diff(startTime),
          min = moment.duration(ms).minutes(),
          sec = moment.duration(ms).seconds();
      ms = moment.duration(ms).milliseconds(); 
      min = (min < 10) ? "0" + min.toString() : min.toString();
      sec = (sec < 10) ? "0" + sec.toString() : sec.toString();
      ms = ms.toString().substring(0,2); // change this if you want to expand ms counter display
      el.innerHtml = min + ":" + sec + "." + ms;
}, 50);

您可以自由更新间隔，并在不调整计算的情况下显示毫秒数。

每页上的递增计时器从0加载

2 个答案: