Скрипт отсчёта до мероприятия: как добавить таймер на сайт

Зачем нужен таймер обратного отсчёта

Таймер решает сразу несколько задач:

• Вовлекает пользователя — динамичный элемент привлекает внимание лучше статичного текста.
• Создаёт эффект срочности — «осталось 3 дня» мотивирует быстрее принять решение.
• Информирует чётко — пользователь видит точное время до события без расчётов.
• Повышает конверсию — в e‑commerce таймеры акций увеличивают продажи.
• Улучшает UX — понятный визуальный индикатор снижает когнитивную нагрузку.

Как работает скрипт таймера

Базовый принцип: JavaScript вычисляет разницу между текущей датой и целевой, затем обновляет интерфейс каждую секунду.

• Задаётся целевая дата (например, «2026‑12‑31 23:59:59»).
• Скрипт получает текущее время в миллисекундах.
• Вычисляется разница (timeLeft) в миллисекундах.
• Разница преобразуется в дни, часы, минуты (и секунды — при необходимости).
• Значения подставляются в соответствующие элементы DOM.
• Процесс повторяется каждую секунду через setInterval.

Как внедрить таймер на сайт

Вставьте в нужное место страницы код отсчета:

<div class="countdown">
    <div class="time-unit">
        <span class="days">00</span>
        <span class="unit-label">д</span>
    </div>
    <div class="time-unit">
        <span class="hours">00</span>
        <span class="unit-label">ч</span>
    </div>
    <div class="time-unit">
        <span class="minutes">00</span>
        <span class="unit-label">м</span>
    </div>
</div>

Далее необходимо подключить файл стилей style.css со следующим содержимым:

.countdown {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
}
.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.time-unit span:first-child {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: bold;
}
.unit-label {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

И перед закрывающим тегом </body> подключаем файл со скриптом script.js следующего содержания:

document.addEventListener('DOMContentLoaded', function() {
  // Укажите целевую дату и время (формат: 'ГГГГ-ММ-ДД ЧЧ:ММ:СС')
  const targetDate = new Date('2026-12-31 23:59:59').getTime();

  function updateCountdown() {
    const now = new Date().getTime();
    const timeLeft = targetDate - now;

    // Если время вышло — останавливаем таймер
    if (timeLeft < 0) {
      document.querySelector('.days').textContent = '00';
      document.querySelector('.hours').textContent = '00';
      document.querySelector('.minutes').textContent = '00';
      return;
    }

    // Вычисляем дни, часы, минуты
    const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));

    // Обновляем отображение
    document.querySelector('.days').textContent = String(days).padStart(2, '0');
    document.querySelector('.hours').textContent = String(hours).padStart(2, '0');
    document.querySelector('.minutes').textContent = String(minutes).padStart(2, '0');
  }

  // Запускаем обновление каждую секунду
  setInterval(updateCountdown, 1000);

  // Сразу запускаем первый расчёт
  updateCountdown();
});

Преимущества готовой реализации

• Простота — не требует сторонних библиотек.
• Гибкость — легко настроить внешний вид и логику.
• Кроссбраузерность — работает в современных браузерах.
• Оптимизирован — минимальный объём кода, нет лишней нагрузки.

Таймер обратного отсчёта — эффективный инструмент для вовлечения пользователей и повышения конверсии. С помощью приведённого кода вы за 5–10 минут добавите на сайт работающий таймер с чистым дизайном. Остаётся только задать дату события и протестировать!