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

Есть разные решения для создания таймера: GIF-картинки, плагины, сервисы. Но это все готовые решения. В этой статье мы сами напишем таймер обратного отсчета на JavaScript. Я покажу готовый скрипт с комментариями и в дальнейшем вы сможете подстроить данный таймер под себя.

Пример таймера обратного отсчета, который мы напишем:

Навигация по статье

Разметка таймера обратного отсчета

Здесь каждый div содержит в себе значение дней, часов, минут и секунд соответственно.

<div class="timer" id="timer">
  <div class="timer__item timer__days" id="days">00</div>
  <div class="timer__item timer__hours" id="hours">00</div>
  <div class="timer__item timer__minutes" id="minutes">00</div>
  <div class="timer__item timer__seconds" id="seconds">00</div>
</div>

Стили таймера обратного отсчета

Комментарии даны в коде.

.timer {
  display: flex; /* Размещаем цифры в ряд */
  user-select: none; /* Запрещаем выделение при клике */
  font-size: 75px; /* Задаем размер цифр */
  font-weight: 300;
  color: #364364; /* Задаем цвет цифр */
}

.timer__item {
  margin: 0 20px; /* Отступы между полями таймера */
  position: relative;
  text-align: center;
}

/* После каждого поля, кроме последнего, вставляем : */
.timer__item:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -30px;
}

/* Стили для подсказок */
.timer__item::before {
  font-size: 16px;
  font-weight: 500;
  color: #a9bcc5;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.timer__days::before {
  content: "дней";
}

.timer__hours::before {
  content: "часов";
}

.timer__minutes::before {
  content: "минут";
}

.timer__seconds::before {
  content: "секунд";
}

Скрипт таймера обратного отсчета

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

const timer = document.querySelector("#timer");
const days = document.querySelector("#days");
const hours = document.querySelector("#hours");
const minutes = document.querySelector("#minutes");
const seconds = document.querySelector("#seconds");

// Устанавливаем дату и время, до которого хотим посчитать разницу
let countDownDate = new Date("Jan 1, 2024 00:00:00").getTime();

let updateTimer = setInterval(function () {
  // Получаем текущее дату и время
  let now = new Date().getTime();
  // Находим разницу между текущим временем и заданным
  let difference = countDownDate - now;

  // Рассчитываем дни, часы, минуты и секунды
  let daysDif = Math.floor(difference / (1000 * 60 * 60 * 24));
  let hoursDif = Math.floor(
    (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  let minutesDif = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  let secondsDif = Math.floor((difference % (1000 * 60)) / 1000);

  // Вставляем значения в таймер
  days.innerHTML = daysDif;
  hours.innerHTML = hoursDif;
  minutes.innerHTML = minutesDif;
  seconds.innerHTML = secondsDif;

  // Когда таймер дойдет до заданной даты и времени
  if (difference < 0) {
    clearInterval(updateTimer);
    timer.innerHTML = "Наступило";
  }
  // Обновляем функцию с интервалом 1 секунда
}, 1000);