Question

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

具体是

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

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

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

非常感谢帮助。

Answer 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

Answer 2

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

例如：

＆＃13;

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);

＆＃13;

<div id="output"></div>

＆＃13;

美化计数器

2 个答案: