间隔函数如何更新秒会影响分钟？

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

---

如果你想要采取这种做法，那么我建议使用矩库。它有很好的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>

Answer 2

在一分钟后重新timeCounter：

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++; 
    if(timeCounter === 60) 
    { 
     timeCounter=0; 
     d.setMinutes(d.getMinutes() + 1); 
    } 

}, 1000); 

jsfiddle

Answer 3

当你到达60秒计数，你不得不增加分钟并重置秒。

var output = document.getElementById("demo"); 
 
var d = new Date(); 
 
var timeCounter = 55; 
 
d.setMinutes(0); 
 
d.setSeconds(timeCounter); 
 
setInterval(function(){ 
 
    console.log("minutes: " + d.getMinutes(), "seconds " + d.getSeconds()); 
 
    if(timeCounter === 60) { 
 
     d.setMinutes(d.getMinutes() + 1); 
 
     timeCounter -= 60; 
 
    } 
 
    d.setSeconds(timeCounter); 
 
    output.textContent = fixDigit(d.getMinutes()) + ":" + fixDigit(d.getSeconds()); 
 
    timeCounter++; 
 
}, 1000); 
 

 
function fixDigit(d){ 
 
return (d < 10) ? "0" + d : d; 
 
}

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

Answer 4

设置d.setSeconds(65)都加分更改秒到5所以在每 迭代与timeCounter > 59，你会增加分钟为好。

见documentation：

如果指定一个参数是预期的范围之外， 调用setSeconds（）尝试相应更新日期 对象中的最新信息。例如，如果对secondsValue使用100，则Date对象中存储的 分钟将增加1，并且将使用40 几秒钟。

如果你想实现一个简单的计数器使用：

d.setSeconds(d.getSeconds() + 1) 

Answer 5

1. 你50秒开始，递增秒迭代
2. 作为秒达到59，它得到60，这是1:00
3. 尝试设置timeCount 50一旦达到59，并在此增量分钟就解决它

您的代码段更改为以下

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(); 
 
    //alert(timeCounter); 
 
    if (timeCounter == 59) { 
 
    var minutes = +d.getMinutes(); 
 

 
    minutes += 1; 
 
    //alert(minutes); 
 
    d.setMinutes(minutes); 
 
    timeCounter = 50; 
 
    } else 
 
    timeCounter++; 
 
}, 1000);

<div id="demo"> 
 
</div>

希望这有助于