Цифровые часы на JavaScript

Цифровые часы на экране Mac

Введение

Цифровые часы — одно из лучших проектов для новичков в JavaScript. Он прост для понимания, даёт практику с объектом Date, DOM-интерфейсом и методом обновления интерфейса по таймеру. Этот гайд объясняет структуру проекта, показывает минимальный код и предлагает полезные улучшения.

Компоненты часов

Цифровые часы обычно состоят из четырёх логических частей: часа, минуты, секунды и обозначения периода (AM/PM). Эти части отображаются внутри одного контейнера и форматируются перед выводом.

Компоненты цифровых часов

Структура папок проекта

Создайте корневую папку проекта и поместите в неё три файла: HTML, CSS и JavaScript. В примере папка называется Digital-Clock, а файлы — index.html, styles.css, script.js.

Структура папок проекта цифровых часов

HTML: каркас для часов

Откройте файл index.html и вставьте следующий код. Этот файл содержит контейнер, в который будет помещаться текущее время с помощью JavaScript.




  
  Digital Clock Using JavaScript

Здесь: контейнер с id=”digital-clock” служит для вывода времени; внешние стили подключены через link, а логика — через script.

JavaScript: базовый рабочий вариант

Вставьте в script.js следующий код. Он получает текущее время, форматирует его в 12-часовой вид и обновляет содержимое контейнера каждую секунду.

function Time() {
  // Creating object of the Date class
  var date = new Date();

  // Get current hour
  var hour = date.getHours();
  // Get current minute
  var minute = date.getMinutes();
  // Get current second
  var second = date.getSeconds();

  // Variable to store AM / PM
  var period = "";

  // Assigning AM / PM according to the current hour
  if (hour >= 12) {
    period = "PM";
  } else {
    period = "AM";
  }

  // Converting the hour in 12-hour format
  if (hour == 0) {
    hour = 12;
  } else {
    if (hour > 12) {
      hour = hour - 12;
    }
  }

  // Updating hour, minute, and second
  // if they are less than 10
  hour = update(hour);
  minute = update(minute);
  second = update(second);

  // Adding time elements to the div
  document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;

  // Set Timer to 1 sec (1000 ms)
  setTimeout(Time, 1000);
}

// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
  if (t < 10) {
    return "0" + t;
  }
  else {
    return t;
  }
}

Time();

Пошаговое объяснение кода

Получение текущего времени

Создайте объект Date:

var date = new Date();

Метод возвращает текущие дату и время. Из него извлекаются часы, минуты и секунды: date.getHours(), date.getMinutes(), date.getSeconds().

Определение AM/PM

Для 12-часового формата назначаем период:

var period = "";
if (hour >= 12) {
  period = "PM";
} else {
  period = "AM";
}

Преобразование в 12-часовой формат

Чтобы 0 часов показать как 12 и привести часы к формату 1–12:

if (hour == 0) {
  hour = 12;
} else {
  if (hour > 12) {
    hour = hour - 12;
  }
}

Лидирующие нули

Если число меньше 10, добавляем ведущий ноль. Это делает отображение стабильным: 09 вместо 9.

function update(t) {
  if (t < 10) {
    return "0" + t;
  } else {
    return t;
  }
}

Вывод в DOM и обновление каждую секунду

Выбираем элемент по id и записываем текст. Затем запускаем setTimeout на 1000 мс для регулярного обновления.

document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
setTimeout(Time, 1000);

Важно: setTimeout вызывает следующую отрисовку примерно через 1000 мс после завершения текущей функции. Для более точного и стабильного шага можно использовать setInterval или вычислять смещение до следующей целой секунды.

CSS: базовый стиль

Откройте styles.css и вставьте этот код:

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
  background-color: #66ffff;
  width: 35%;
  margin: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 64px;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Этот CSS задаёт шрифт, фон и глубину с помощью теней. Размер шрифта в примере — 64px; контейнер занимает 35% ширины родителя.

Важные примечания

Важно: браузерный объект Date работает в системной временной зоне. Для отображения времени в другой временной зоне потребуется дополнительная логика или библиотека.

Примечание: код использует innerText. Если нужно вставлять HTML (например, отдельные элементы span для часов и минут), используйте innerHTML или манипулируйте элементами DOM напрямую.

Улучшения и альтернативные подходы

24‑часовой формат: вместо преобразования вы можете показывать часы как есть (date.getHours()) и убрать AM/PM.
Использование padStart: современный способ добавления нуля — String(value).padStart(2, ‘0’).
setInterval vs setTimeout: setInterval проще для повторения, но setTimeout позволяет компенсировать дрейф.
Возможность приостановки/возобновления: добавьте кнопку Start/Stop, чтобы останавливать обновление.
Отдельные DOM-элементы: вместо одной строки используйте span для часов, минут, секунд и meridiem — удобно для стилизации и анимаций.
Поддержка локализации: формат времени и обозначения AM/PM зависят от локали. Для локализации даты/времени используйте Intl.DateTimeFormat.

Мини-методология: как улучшать проект по шагам

Начните с минимального рабочего варианта (HTML + JS из примера).
Добавьте стили и адаптивную вёрстку.
Замените строковый вывод на элементы span с классами.
Добавьте тесты отображения (юнит-тесты функций форматирования).
Добавьте переключатель 12/24, кнопку старт/стоп и опцию показа даты.
Протестируйте в разных браузерах и временных зонах.

Пример улучшенного JavaScript (современный стиль)

Ниже пример функции с padStart, опцией 24/12 и возможностью остановки/запуска:

let timerId = null;
let use24Hour = false; // переключите, чтобы использовать 24-часовой формат

function formatTime(date, use24) {
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let period = '';

  if (!use24) {
    period = hours >= 12 ? 'PM' : 'AM';
    if (hours === 0) hours = 12;
    else if (hours > 12) hours = hours - 12;
  }

  const h = String(hours).padStart(2, '0');
  const m = String(minutes).padStart(2, '0');
  const s = String(seconds).padStart(2, '0');

  return {text: `${h} : ${m} : ${s}` + (use24 ? '' : ` ${period}`), period};
}

function startClock() {
  if (timerId) return; // уже запущен
  function tick() {
    const now = new Date();
    const formatted = formatTime(now, use24Hour);
    document.getElementById('digital-clock').innerText = formatted.text;
    // Выравниваем следующий вызов на начало следующей секунды
    const msToNextSecond = 1000 - (now.getMilliseconds());
    timerId = setTimeout(tick, msToNextSecond);
  }
  tick();
}

function stopClock() {
  if (timerId) {
    clearTimeout(timerId);
    timerId = null;
  }
}

// Автозапуск
startClock();

Этот вариант точнее синхронизирует обновление с системными секундами и даёт гибкость по формату времени.

Доступность и международные особенности

Добавьте aria-label для контейнера:
, чтобы экранные читалки произносили время при обновлении.
Для других локалей используйте Intl.DateTimeFormat, если необходимо форматировать в соответствии с региональными стандартами.
Учитывайте цветовые контрасты и масштабируемость шрифта для пользователей с нарушенным зрением.

Критерии приёмки

Часы отображают текущее время и обновляются каждую секунду.
Формат 12/24 соответствует настройке и корректно переключается.
При остановке (Stop) обновление прекращается, при запуске (Start) — возобновляется.
Элемент снабжён aria-live для поддержки экранных читалок.
Отображение остаётся корректным при изменении размеров окна (адаптивность).

Чеклист перед деплоем

Код протестирован в Chrome, Firefox и Safari.
Проверена точность обновления секунд (не накапливается дрейф).
Добавлен fallback для старых браузеров (padStart полифилл или альтернативная функция).
Проверены контрасты цветов и шрифты на мобильных устройствах.
Локализация формата времени при необходимости.

Тестовые случаи

При 00:00:05 вывести 12 : 00 : 05 AM.
При 12:30:09 вывести 12 : 30 : 09 PM.
Переключение в 24-часовой режим: 23:05:08.
Нажатие Stop останавливает обновления, Start возобновляет.

Когда этот подход не подходит

Если нужна работа с удалёнными часовыми поясами — требуется серверная логика или библиотека для работы с зонами (например, Intl с опцией timeZone).
Для критичных к миллисекундам приложений (таймеры для торговых систем) браузерный таймер недостаточно точен.

Идеи для расширения

Добавить отображение даты и дня недели.
Синхронизировать время с NTP-сервером для высокой точности.
Добавить конфигурацию тем оформления и анимации переходов для смены секунд.

Итог

Цифровые часы — отличный учебный проект, который охватывает Date, форматирование строк, работу с DOM и простую таймерную логику. Начните с минимального варианта, затем постепенно добавляйте локализацию, доступность и дополнительные функции.

Короткий список полезных действий: реализуйте кнопку Start/Stop, добавьте переключатель 12/24 и убедитесь, что интерфейс корректно воспринимается экранными читалками.

Важно: код из этой статьи можно использовать под лицензией MIT.

Цифровые часы на JavaScript — быстрый гайд