美化倒计时答案

【问题标题】：Beautifying a countup timer美化倒计时
【发布时间】：2016-08-14 14:14:10
【问题描述】：

我正在尝试重新创建我在此网站上看到的 Javascript 计时器：http://www.everysecond.io/apple/

具体来说

**"It has been 1 minute and 32 seconds"**

我有一个普通的计数器，但它的显示就像一个数字时钟，我已经在谷歌上搜索了一个小时，但没有找到解决方案。

这是来自该网站的带计数器的笔，我试图从中学习并将其剥离为我需要的东西，但没有运气。 http://codepen.io/LukeD1uk/pen/ZOwvqv

我们将不胜感激。

【问题讨论】：

标签： javascript jquery timer

【解决方案1】：

   var sec =0, min=0, hour=0;
setInterval(function(){
   sec++;
   if(sec==60){sec=0; min++;}
   if(min==60){min=0; hour++;}
   var str = 'it has been';
   str+= hour?' ' +hour + (hour==1?' hour':' hours'):'';
   str+= min?(hour?' and ':' ') +min+ (min==1?' minute':' minutes') :'';
   str+= sec?(min||hour?' and ':' ') +sec+ (sec==1?' second':' seconds'):'';
document.getElementById('passed').innerHTML=str;
},1000);

这里是DEMO

【讨论】：

辉煌 :D 谢谢
出现错误。我纠正了它。请看一下

【解决方案2】：

请注意，setInterval() 在多次调用后可能会略有漂移。不确定这是否是这里的要求，但如果您需要一个准确的计时器，使用参考时间会更安全。

例如：

var start = +new Date();

setInterval(function() {
  var d = Math.round((+new Date() - start) / 1000),
      n, res = [];

  [[3600, 'hour'], [60, 'minute'], [1, 'second']].forEach(function(e) {
    if(n = (d / e[0]) | 0) {
      res.push(n + ' ' + e[1] + (n > 1 ? 's' : ''));
      d -= n * e[0];
    }
  });
  document.getElementById('output').innerHTML = 'It has been ' + res.join(' and ');
}, 1000);

&lt;div id="output"&gt;&lt;/div&gt;

【讨论】：