Цветные часы с использованием setInterval

вернуться к уроку

Цветные часы с использованием setInterval

важность: 4

Создайте цветные часы как в примере ниже:

[フレーム]

Для стилизации используйте HTML/CSS, JavaScript должен только обновлять время в элементах.

Открыть песочницу для задачи.

Для начала придумаем подходящую HTML/CSS-структуру.

Здесь каждый компонент времени удобно поместить в соответствующий <span>:

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

Каждый span раскрашивается при помощи CSS.

Функция update будет обновлять часы, setInterval вызывает её каждую секунду:

function update() {
 let clock = document.getElementById('clock');
 let date = new Date(); // (*)
 let hours = date.getHours();
 if (hours < 10) hours = '0' + hours;
 clock.children[0].innerHTML = hours;
 let minutes = date.getMinutes();
 if (minutes < 10) minutes = '0' + minutes;
 clock.children[1].innerHTML = minutes;
 let seconds = date.getSeconds();
 if (seconds < 10) seconds = '0' + seconds;
 clock.children[2].innerHTML = seconds;
}

В строке (*) каждый раз мы получаем текущую дату. Вызовы setInterval не надёжны: они могут происходить с задержками.

Функция clockStart для запуска часов:

let timerId;
function clockStart() { // запустить часы
 timerId = setInterval(update, 1000);
 update(); // (*)
}
function clockStop() {
 clearInterval(timerId);
 timerId = null;
}

Обратите внимание, что вызов update() не только запланирован, но и тут же производится в строке (*). Иначе посетителю пришлось бы ждать до первого выполнения setInterval, то есть целую секунду.

Открыть решение в песочнице.