Как на JavaScript реализовать таймер обратного отсчета до конца акции на сайте?

Таймер обратного отсчёта — популярный элемент на лендингах и интернет-магазинах. Он создаёт ощущение срочности и мотивирует пользователей совершить покупку до окончания акции. Реализовать его на чистом JavaScript несложно.

**Базовая реализация**

Для начала определите дату и время окончания акции, затем с помощью `setInterval` обновляйте отображение каждую секунду.

html

const endDate = new Date(‘2025-12-31T23:59:59’);

function updateTimer() {
const now = new Date();
const diff = endDate — now;

if (diff <= 0) {
clearInterval(interval);
document.getElementById('timer').textContent = 'Акция завершена!';
return;
}

const hours = Math.floor(diff / 1000 / 3600);
const minutes = Math.floor((diff / 1000 % 3600) / 60);
const seconds = Math.floor(diff / 1000 % 60);

document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
}

updateTimer();
const interval = setInterval(updateTimer, 1000);

**Ключевые моменты реализации**

1. **Вычисление разницы времени.** Разность `endDate — now` возвращает миллисекунды. Делите на 1000 для секунд, на 3600 для часов и т.д.
2. **Форматирование.** Метод `padStart(2, ‘0’)` добавляет ведущий ноль, чтобы «5» отображалось как «05».
3. **Остановка таймера.** Когда разность становится отрицательной или равной нулю, вызывайте `clearInterval`, чтобы не продолжать выполнение.
4. **Отображение дней.** Если акция длится несколько дней, добавьте вычисление: `const days = Math.floor(diff / 1000 / 3600 / 24)` и соответственно скорректируйте расчёт часов: `Math.floor(diff / 1000 / 3600 % 24)`.

**Советы по улучшению**

— **CSS-анимация.** Добавьте плавное обновление цифр через CSS-переходы или библиотеку Anime.js.
— **Хранение даты окончания.** Для гибкости получайте дату с сервера через API, а не задавайте её жёстко в коде.
— **Часовые пояса.** Используйте UTC-время (`Date.UTC(…)`) или библиотеку `date-fns` / `dayjs`, чтобы таймер работал корректно для всех пользователей.
— **Обработка окончания акции.** По завершении скрывайте кнопку «Купить» или показывайте блок с альтернативным предложением.
— **Производительность.** Для критичных страниц используйте `requestAnimationFrame` вместо `setInterval`, чтобы снизить нагрузку на браузер.

Таким образом, базовый таймер пишется буквально за 20–30 строк кода и легко интегрируется в любой HTML-шаблон.