Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Помощь с таймером (https://javascript.ru/forum/css-html/72382-pomoshh-s-tajjmerom.html)

Konor 25.01.2018 07:57

Помощь с таймером
 
Есть в 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 25.01.2018 08:18

if (timeA[0] == -1)

Konor 25.01.2018 08:35

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

Белый шум 25.01.2018 09:08

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

Pavel M. 25.01.2018 11:23

может проще объект 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 25.01.2018 12:22

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

Pavel M. 25.01.2018 12:33

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

j0hnik 25.01.2018 18:03

Цитата:

Сообщение от Konor (Сообщение 476173)
Тогда с 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 26.01.2018 12:08

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

рони 26.01.2018 13:39

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


Часовой пояс GMT +3, время: 15:04.