Цифровые часы на JavaScript — пошаговый урок

В этом примере элемент div с id digital-clock служит контейнером для отображения времени. CSS и JavaScript подключаются как внешние файлы.

JavaScript логика

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

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, из него берутся часы, минуты и секунды.
• Переменная period используется для AM/PM в 12‑часовом формате.
• Если час равен 0, он отображается как 12. Если больше 12, вычитаем 12.
• Функция update добавляет ведущий ноль для значений < 10.
• Результат записывается в innerText целевого div.
• setTimeout повторно вызывает функцию каждую секунду.

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 отвечает за внешний вид: шрифты, отступы, фон и тень. Шрифт подключается через Google Fonts.

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

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

• setInterval вместо setTimeout для простоты: setInterval(Time, 1000). setTimeout даёт больше контроля (позволяет динамически менять интервал).
• 24‑часовой формат: опустить обработку AM/PM и не вычитать 12.
• Использовать Intl.DateTimeFormat для локализованного форматирования времени и получения формата часов по региону.
• Отрисовка отдельными элементами span для часов/минут/секунд — удобнее для анимаций и тестирования.
• Web Components или React/Vue для интеграции в крупные приложения.

Когда такое решение не подойдёт

• Нужна сверхточная синхронизация с сервером (NTP). Клиентское Date зависит от системного времени.
• Приложение должно сохранять время при спящем режиме устройства: мобильные браузеры могут приостанавливать таймеры.
• Требуется локализация формата времени и обозначений AM/PM для разных языков — лучше применять Intl.

Практические подсказки и эвристики

• Всегда тестируйте в разных часовых поясах и при переключении системного времени.
• Для анимаций обновляйте только изменённые элементы (например, секунды), чтобы снизить перерисовки.
• На мобильных устройствах используйте visibilitychange, чтобы корректно останавливать и возобновлять таймеры.

Сниппеты и готовые шаблоны

• Быстрая замена setTimeout на setInterval:

// В конце функции Time замените setTimeout на:
setInterval(Time, 1000);
// И вызовите Time() один раз при загрузке
Time();

• Версия без AM/PM, 24‑часовой формат:

var hour = date.getHours();
// не меняем hour для 24-часового формата

• Форматирование через Intl для локали пользователя:

const now = new Date();
const timeStr = new Intl.DateTimeFormat(navigator.language, { hour: 'numeric', minute: '2-digit', second: '2-digit' }).format(now);
document.getElementById('digital-clock').innerText = timeStr;

Чеклист для разработчика перед релизом

• Код корректно работает в целевых браузерах.
• Таймер не утекал после сворачивания вкладки.
• Вёрстка адаптируется под разные ширины.
• Добавлены тесты или сценарии ручной проверки.
• README с лицензией и инструкцией для запуска в продакшн.

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

• Часы показывают корректное время и обновляются каждую секунду.
• Формат времени соответствует заявленному (12 или 24 часа).
• UI не ломается при смене размеров окна.
• Нет накопления таймеров при повторной инициализации.

Тест‑кейсы

• Ожидаемое поведение: после загрузки страница показывает текущее время с ведущими нулями для однозначных значений.
• Edge case: если системный час переводится вручную, часы обновляются соответственно.
• Performance: метод не вызывает заметных утечек памяти при длительной работе.

Развёртывание и публикация

• Можно разместить на GitHub Pages: запушьте репозиторий и включите Pages в настройках.
• В README укажите браузерные требования и лицензию MIT.

Короткое объявление проекта (100–200 слов)

Созданы минимальные цифровые часы на HTML/CSS/JavaScript, которые обновляются каждую секунду и отображают время в 12‑часовом формате с обозначением AM/PM. Проект полезен для обучения: показывает работу с объектом Date, DOM и таймерами. Код открыт под MIT‑лицензией, есть версия с Intl.DateTimeFormat для локализации и рекомендации по замене setTimeout на setInterval. Подойдёт как демонстрация в портфолио или как встроенный компонент интерфейса.

Краткая сводка и советы

• Начните с базового примера: HTML контейнер, простой JS и CSS для стилей.
• Если проект должен учитывать локали и форматы времени, используйте Intl.DateTimeFormat.
• Для продакшн‑решений учитывайте работу таймеров при фоновой работе браузера.

Итог: простой проект цифровых часов — отличный способ закрепить базовые навыки веб‑разработки и получить готовый компонент для портфолио.