Простой таймер обратного отсчёта на JavaScript

Таймер обратного отсчёта — удобный инструмент для отображения оставшегося времени до определённого события: запуск акции, завершение регистрации, начало мероприятия и так далее. С помощью JavaScript можно легко реализовать такой таймер, который обновляется в реальном времени прямо на странице.

В этой статье мы разберём как создать простой таймер и покажем корректный, упрощённый код без лишних сложностей.

Как работает таймер

Таймер работает по простой логике:

1. Вы задаёте конечную дату/время.
2. С помощью JavaScript вычисляется разница между текущим временем и целевым.
3. Таймер обновляется каждую секунду, показывая дни, часы, минуты и секунды до события.

Простой и правильный код таймера

Вот минимальный и работоспособный код, который можно вставить на любую страницу:

HTML

<div id="countdown">Загрузка...</div>

JavaScript

// Устанавливаем конечную дату и время
const targetDate = new Date("2026-07-01T00:00:00").getTime();// Функция обновления таймера
function updateTimer() {
    const now = new Date().getTime();
    const distance = targetDate - now;    if (distance <= 0) {
        document.getElementById("countdown").textContent = "Время истекло!";
        clearInterval(timerInterval);
        return;
    }    // Вычисляем дни, часы, минуты, секунды
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);    // Выводим результат
    document.getElementById("countdown").textContent =
        days + "д " + hours + "ч " + minutes + "м " + seconds + "с";
}// Обновляем таймер каждую секунду
const timerInterval = setInterval(updateTimer, 1000);// Запускаем сразу, чтобы не ждать 1 секунду
updateTimer();

Пояснение к коду

• new Date("...").getTime() — преобразует строковую дату в метку времени в миллисекундах.
• setInterval(updateTimer, 1000) — вызывает функцию каждую секунду.
• Вычисление days, hours, minutes, seconds основано на разнице во времени.
• Когда время истекает (distance <= 0), таймер останавливается и выводит сообщение.

Как адаптировать таймер

Показ только часов, минут и секунд

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);document.getElementById("countdown").textContent =
    hours + ":" + minutes + ":" + seconds;

Изменение текста по окончанию

Можно заменить "Время истекло!" на любой другой текст.

Частые ошибки при реализации

• Таймер указывает в прошлом — убедитесь, что конечная дата больше текущей.
• Элемент с id="countdown" отсутствует на странице — таймер не сможет обновляться.
• Неверный формат даты — используйте формат ISO (YYYY-MM-DDTHH:MM:SS) для стабильности.