Помощь с таймером

[Konor]

Есть в HTML простая строка:

<div id="time">
    Таймер: <span id="day">0</span> : <span id='hour'>0</span> : <span id="min">0</span> : <span id="sec">0</span>
</div>

И JavaScript (скрипт не закончен):

var timeA = [5, 59, 23, 3];
var htmlTime = [document.getElementById('sec'), document.getElementById('min'), document.getElementById('hour'), document.getElementById('day')];

htmlTime[0].innerHTML = timeA[0];
htmlTime[1].innerHTML = timeA[1];
htmlTime[2].innerHTML = timeA[2];
htmlTime[3].innerHTML = timeA[3];

function time(){
    htmlTime[0].innerHTML = timeA[0];
    timeA[0]--;
    
    if (timeA[0] == 0){
        timeA[1]--;
        htmlTime[1].innerHTML = timeA[1];
        timeA[0] = 5;
    }
}

setInterval(time, 1000);

Почему-то счётчик минут декрементирует, когда остаётся ещё одна секунда, а нужно чтобы это происходило одновременно с восполнением счётчика секунд. Как исправить?

[j0hnik]

if (timeA[0] == -1)

[Konor]

Тогда с 1 перескакивает на -1 вместо 0

[Белый шум]

строку:
htmlTime[0].innerHTML = timeA[0];
перенесите вконец ф-ии

[Pavel M.]

может проще объект Date использовать, пусть сам считает?

<div id="time">
    Таймер: <span id="day">0</span> : <span id='hour'>0</span> : <span id="min">0</span> : <span id="sec">0</span>
</div>
  
<script>
    var d = new Date(2018, 0, 3, 23, 59, 5),
      htmlTime = [document.getElementById('sec'), document.getElementById('min'), document.getElementById('hour'), document.getElementById('day')];

    function time(){
       htmlTime[3].innerHTML = d.getDate();
       htmlTime[2].innerHTML = d.getHours();
       htmlTime[1].innerHTML = d.getMinutes();
       htmlTime[0].innerHTML = d.getSeconds();
       d = new Date(d - 1000); // вычитаем 1000 милисекунд
    }

    time();
    setInterval(time, 1000);
</script>

[Konor]

Проще, спасибо за подсказку. Я просто ещё не изучал объект Date

[Pavel M.]

начните здесь https://learn.javascript.ru/datetime

[j0hnik]

Тогда с 1 перескакивает на -1 вместо 0

нет, где что перескакивает?

<div id="time">
    Таймер: <span id="day">0</span> : <span id='hour'>0</span> : <span id="min">0</span> : <span id="sec">0</span>
</div>


<script>
var timeA = [5, 59, 23, 3];
var htmlTime = [document.getElementById('sec'), document.getElementById('min'), document.getElementById('hour'), document.getElementById('day')];

htmlTime[0].innerHTML = timeA[0];
htmlTime[1].innerHTML = timeA[1];
htmlTime[2].innerHTML = timeA[2];
htmlTime[3].innerHTML = timeA[3];

function time(){
    htmlTime[0].innerHTML = timeA[0];
    timeA[0]--;
    
    if (timeA[0] == -1){
        timeA[1]--;
        htmlTime[1].innerHTML = timeA[1];
        timeA[0] = 5;
    }
}

setInterval(time, 1000);
</script>

[Konor]

А как можно реализовать привязку, чтобы при обновлении страницы таймер не сбрасывался?

[рони]

Konor,
https://javascript.ru/forum/misc/256...tml#post156853