Как сделать часы на сайт: HTML и JavaScript

Живые часы на сайте можно сделать тремя частями: элементом <time>, небольшим стилем и функцией JavaScript, которая каждый раз берёт текущее время заново. Библиотека и внешний виджет не нужны. Ниже есть готовый пример для времени посетителя и вариант с фиксированным часовым поясом.

Какие часы вы хотите показать

Сначала выберите смысл, иначе исправный виджет будет вводить людей в заблуждение. Локальные часы показывают время на устройстве посетителя. Часы офиса показывают одну заданную зону для всех. Таймер обратного отсчёта решает другую задачу и требует конечной даты, поэтому здесь он не рассматривается.

• Локальное время подходит для личного кабинета, где важен контекст посетителя.
• Фиксированная зона подходит для расписания поддержки, эфира или офиса.
• Несколько зон нужны, только если посетитель действительно сравнивает города.
• Аналоговый циферблат может быть частью дизайна, но для точного чтения нужна цифровая подпись.

Если нужно вывести календарную дату, используйте отдельную инструкцию по дате на сайте. Если часы являются одним из нескольких компонентов, сначала выберите способ подключения в разборе виджетов.

Не прибавляйте секунду к сохранённому числу. На каждом обновлении создавайте новый Date, тогда часы исправятся после сна ноутбука, паузы фоновой вкладки и смены системного времени.

Готовый код локальных часов

Объект [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) форматирует дату и время с учётом языка и настроек. В примере язык задан явно, чтобы порядок и разделители не зависели от случайных настроек страницы.

<div class="site-clock" aria-label="Текущее время">
  <span class="site-clock__label">Сейчас</span>
  <time id="site-clock" datetime=""></time>
</div>

<style>
.site-clock {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #f6f1ec;
  color: #242424;
  font-variant-numeric: tabular-nums;
}
.site-clock__label { color: #6b625d; }
</style>

<script>
const clock = document.getElementById('site-clock');
const formatter = new Intl.DateTimeFormat('ru-RU', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

function renderClock() {
  const now = new Date();
  clock.textContent = formatter.format(now);
  clock.dateTime = now.toISOString();
}

renderClock();
setInterval(renderClock, 1000);
</script>

Поставьте фрагмент в HTML-блок страницы. Скрипт расположен после разметки, поэтому элемент уже существует к моменту поиска по id. Если конструктор отдельно хранит HTML, CSS и JavaScript, распределите части по его полям, не добавляя второй <script> вокруг кода.

Метод [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval) вызывает функцию с заданной задержкой, но браузер не обещает идеально точный ритм. Фоновая вкладка может обновляться реже. Поэтому функция выводит новый Date, а не считает секунды самостоятельно.

Как зафиксировать часовой пояс

Для времени конкретного офиса добавьте опцию timeZone в форматтер. Например, Europe/Moscow показывает московскую зону независимо от устройства посетителя. Не подписывайте часы названием города, пока не установили эту опцию.

const formatter = new Intl.DateTimeFormat('ru-RU', {
  timeZone: 'Europe/Moscow',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  timeZoneName: 'short'
});

Справочник [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) описывает timeZone и timeZoneName. Неизвестное название зоны может вызвать RangeError. Поэтому берите значение из проверенного списка и тестируйте в целевых браузерах.

1. Решите, показываете время посетителя или одну зону для всех.
2. Вставьте HTML, CSS и JavaScript в тестовую страницу.
3. Сравните показание с системными часами либо временем выбранной зоны.
4. Переведите вкладку в фон на несколько минут, затем вернитесь. Значение должно сразу стать актуальным.
5. Откройте страницу на телефоне и проверьте, что блок не выталкивает меню.
6. Отключите JavaScript и убедитесь, что пустой блок не мешает основному содержимому.

По теме: Как сделать сайт на Joomla: установка и запуск в 2026

Как встроить часы без вреда для страницы

Не помещайте часы в главный заголовок и не делайте их самой крупной частью страницы, если время не является основной услугой. Виджет должен иметь устойчивую ширину цифр. CSS-свойство font-variant-numeric: tabular-nums уменьшает дёргание, потому что цифры занимают одинаковое место в поддерживающем шрифте.

Не добавляйте aria-live="polite" к элементу, который меняется каждую секунду. Вспомогательная технология может слишком часто сообщать обновления. Достаточно понятной подписи и элемента <time>. Семантика элемента описана в [справке MDN по <time>](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time).

Часы являются хорошим минимальным упражнением: один элемент, один форматтер и один таймер. После него переходите к роли JavaScript на странице, где разобрано, когда интерактивность нужна.

Диагностика по симптому

На странице пустое место. Откройте консоль. Если clock равен null, скрипт запустился раньше HTML или id различаются. Переместите скрипт ниже элемента либо запускайте после готовности документа.

Время отличается на несколько часов. Определите ожидаемую зону. Для времени посетителя уберите timeZone; для офиса укажите её явно. Не исправляйте разницу ручным прибавлением часов.

Часы остановились в фоновой вкладке. Это ограничение таймеров браузера. После возвращения функция должна взять новый Date. Если код увеличивает сохранённый счётчик, замените его на повторное чтение времени.

В конструкторе виден текст кода. Фрагмент вставлен в обычный текстовый блок. Используйте HTML-блок или поле пользовательского кода. Если тариф запрещает JavaScript, этот способ не заработает.

По теме: Как сделать сайт прозрачным: фон и карточки в 2026

Проверяемый чек-лист

• При первой загрузке время появляется без ожидания интервала.
• После возвращения из фоновой вкладки часы показывают текущую минуту.
• Подпись города совпадает с явно заданной зоной.
• Секунды не меняют ширину блока и не двигают соседние элементы.
• В мобильной версии часы помещаются в строку или аккуратно переносятся.
• При ошибке JavaScript основная навигация и содержание продолжают работать.

Второй практический приём: временно поставьте неверную зону, например опечатку в имени, и убедитесь, что ошибка видна в консоли. Затем верните корректное значение. Такой тест доказывает, что вы проверяете именно свой код, а не случайно оставшийся внешний виджет или кеш.

Когда лучше не добавлять часы

Часы не нужны на обычной визитке, если они не объясняют режим работы, срок события или состояние сервиса. Системное время уже видно на устройстве. Лишний обновляемый элемент расходует внимание и добавляет точку проверки.

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

Частые вопросы

Можно ли сделать часы только на HTML?

HTML может обозначить время, но сам не обновляет его каждую секунду. Для живого значения нужен JavaScript или внешний виджет.

Как убрать секунды?

Удалите опцию second и обновляйте значение раз в минуту. Сразу вызывайте renderClock(), чтобы оно появилось без ожидания.

Как показать время другого города?

Укажите IANA-имя зоны в timeZone и подпишите город. Проверьте результат на реальной дате, особенно если в регионе менялись правила сезонного времени.

Нужна ли библиотека?

Для цифровых часов обычно нет. Встроенных Date, Intl.DateTimeFormat и таймера достаточно. Библиотека оправдана для сложных календарей и зон.