Как сделать формат таймеру?

Question

[Антон]

window.onload = function(){
    function timer(){

        var hour = document.getElementById('hour').innerHTML;
        var minute = document.getElementById('minute').innerHTML;
        var second = document.getElementById('second').innerHTML;
        var end = false;

        if( second > 0 ) second--;
        else{
            second = 60;

            if( minute > 0 ) minute--;
            else{
                second = 60;

                if( hour > 0 ) hour--;
                else end = true;
            }
        }

        if(end){
            clearInterval(intervalID);
					  $('#timer').addClass('hidden');
            //$('#close-dep').removeClass('hidden').addClass('visible animated fadeIn');
						$('#time-close').append('<button id="close-dep" type="button" class="animated fadeIn button button-blue" name="button">Закрыть</button>');
        }else{
            document.getElementById('hour').innerHTML = hour;
            document.getElementById('minute').innerHTML = minute;
            document.getElementById('second').innerHTML = second;
        }
    }
    window.intervalID = setInterval(timer, 1000);
  }

таймер имеет такой формат


а надо сделать 00:00:00 , подскажите как изменить формат, спасибо

Answer 1

[Роман]

По аналогии..

<div id="clock">
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>

function update() {
  var clock = document.getElementById('clock');

  var date = new Date(); // (*)

  var hours = date.getHours();
  if (hours < 10) hours = '0' + hours;
  clock.children[0].innerHTML = hours;

  var minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;
  clock.children[1].innerHTML = minutes;

  var seconds = date.getSeconds();
  if (seconds < 10) seconds = '0' + seconds;
  clock.children[2].innerHTML = seconds;
}

Answer 2

[Stalker_RED]

Вы по шесть раз в секунду зачем-то делаете getElementById. Не надо так.

https://jsfiddle.net/3qz11pe8/

Comments

[Антон]

https://jsfiddle.net/84e55pbw/1/
Изменил весь код, теперь все работает как надо, но подскажите как сделать что бы при обновлении страницы таймер не сбрасывался?

[Stalker_RED]

Антон, $('#timer').each ... бессмысленная конструкция, ведб на странице может быть только один элемент с id=timer
Кроме того, и эта, и следующие две выборки опять таки происходят каждую секунду. Почему не вынести их за пределы setTimeout?

Не сбрасывался, а что делал? Вы же каждый раз читаете стартовое значение из HTML-кода страницы. Причем не только на старте, а каждую секунду.

[Антон]

Stalker_RED, насчет первого исправлю, а как через js сделать что бы время указать и после обновления оно не сбрасывалось а доходило до 0 ?

[Stalker_RED]

Антон, запоминать текущее значение в localStorage, например. Но еще лучше ориентироваться на ту дату и время, когда таймер должен дойти до нуля.

[Антон]

Stalker_RED, таймер будет начинаться по нажатию кнопки, как все это реализовать? спасибо

[Stalker_RED]

Антон, ну запускайте по нажатию

[Антон]

Stalker_RED, Я понимаю, но как во-первых реализовать выставление времени не в html а в js, во во-вторых как использовать LocalStorage в моем коде, не понимаю..

[Stalker_RED]

Антон, вы смотрели код, который в моем ответе?

localStorage.setItem('timer', 1234456)
var timer = parseInt(localStorage.getItem('timer'))

https://developer.mozilla.org/en-US/docs/Web/API/S...

[Антон]

Stalker_RED, Да код видел, но он для меня лично не подходит, там указывается конкретная дата, а мне надо просто по нажатию кнопки..

[Stalker_RED]

Антон,
Там же есть пример с таймером на 1 минуту. Очень сложно поменять 60 секунд на 4 секунды?

$('button').on('click') {
  let now_plus_4_sec = new Date().getTime() + 4000
	countdown(now_plus_4_sec, HTML_element)
}