Простий годинник на JavaScript

Існує багато прикладів реалізації годинника за допомогою JavaScript, і хоча підходи можуть дещо відрізнятися, більшість із них дотримуються схожої ідеї. Як правило, така функціональність будується за допомогою функцій синхронізації, таких як setTimeout або setInterval, які дозволяють інтерфейсу оновлювати відображений час через регулярні проміжки часу.

Незважаючи на те, що логіка простого годинника не дуже складна, це чудова практична вправа для розуміння того, як працює об’єкт Date у JavaScript. Створюючи годинник з нуля, ви можете навчитися отримувати поточний час, форматувати години, хвилини та секунди, а також динамічно оновлювати інтерфейс користувача без перезавантаження сторінки.

У цьому прикладі ми створимо простий цифровий годинник у 24-годинному форматі за допомогою функції setTimeout. Цей підхід дає більше контролю над циклом оновлення та може бути трохи гнучкішим порівняно з setInterval. По дорозі ми також розглянемо основні завдання форматування, такі як додавання початкових нулів до одноцифрових значень, щоб час відображався в чистому та узгодженому форматі.

HTML

<div id="clock"></div>

JavaScript

function clock() {

  const date = new Date();

  let hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

  if (hours < 10) hours = '0' + hours;
  if (minutes < 10) minutes = '0' + minutes;
  if (seconds < 10) seconds = '0' + seconds;

  const time = hours + ':' + minutes + ':' + seconds;

  document.getElementById('clock').innerText = time;

  setTimeout(() => {
    clock();
  }, 1000);
}

clock();

Ви можете переглянути приклад на Codepen: https://codepen.io/igorrybalko/pen/wBwzKeE