javascript - 间隔功能更新秒将如何影响分钟？

Question

如果使用整数计数器，那么使用mod 60应该会更容易，但是Date（）对象存在一些问题。

<p id="demo"></p>

<script>
var d = new Date();
var timeCounter = 50;
d.setMinutes(0);
d.setSeconds(timeCounter);
setInterval(function(){
    d.setSeconds(timeCounter);
    document.getElementById("demo").innerHTML = d.getMinutes() + ":" + d.getSeconds();
    timeCounter++;
}, 1000);
</script>

在间隔功能之后，分钟将以秒为单位；很好但是，当计数器更改时，分钟将与秒同时增加，例如“ 1:01”，“ 2:02”，“ 3:03” ...

但是当我简单地重复使用getMinutes函数时，该函数正常工作

var d = new Date();
console.log(d.getMinutes());  //12
console.log(d.getMinutes());  //12
console.log(d.getMinutes());  //12

问题间隔函数更新秒将如何影响分钟？

Answer 1

假设初始时间是00:00:00。

您将秒设置为50，它将变为00:00:00。

然后，您将秒设置为65并尝试变为00:00:65，但这是无效的，因此将多余的秒数添加到分钟数：00:01:15

现在时间是00:01:15

如果将秒更改为30，它将变为00:01:30。您正在更改当前设置时间的秒数，而不是第一次创建对象时设置的时间。

所以时间是00:01:30。

如果将秒数更改为65，则会得到00:01:65，这是无效的，因此多余的秒数将添加到已经存在的分钟数中。 1 + 60/60 = 2这样您会得到：00:02:15



如果您想采用这种方法，那么建议您使用Moment库。它具有用于处理添加时间和克隆对象的不错的API。

var start = moment();
start.minute(0);
start.second(0);
var timeCounter = 50;

setInterval(function() {
  // Clone the original object so we aren't adding from the previous value
  var now = moment(start);
  now.seconds(timeCounter);
  document.getElementById("demo").innerHTML = now.format("mm:ss");
  timeCounter++;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="demo"></div>

不过，这不是一个好方法。 setInterval的精度不是很高，在某些情况下可能会延迟几秒钟。

最好从一个时间开始，然后计算每次更新显示与现在之间的差。

var start = moment();

setInterval(function() {
  // Clone the original object so we aren't adding from the previous value
  var now = moment();
  var dur = moment.duration(now.diff(start)); 
  
  document.getElementById("demo").innerHTML = dur.minutes() + ":" + dur.seconds();
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="demo"></div>