, как интервал обновления секунд секунд будет влиять на минуты?

Question

Если использовать целочисленный счетчик, это должно быть проще по модулю 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>

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() пытается обновить информацию о дате в объекте Дата соответственно. Например, если вы используете 100 для secondsValue, то минут, хранящиеся в объекте Date, будут увеличиваться на 1, а 40 будет использоваться в течение нескольких секунд.

Если вы хотите реализовать простое использование счетчика:

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

Answer 5

1. вы начинаете с 50 секунд и приращением секунд для итерации
2. Как секунд достигнет 59, он получает до 60, которые is 1:00
3. Попробуйте установить времяСкорость до 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>

Надеется, что это помогает