Создание легкого циклического таймера обратного отсчета на JS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Скопировать код

const endTime = new Date("YYYY-MM-DDTHH:MM:SS").getTime();

const timer = setInterval(() => {
  const now = new Date().getTime();
  const remaining = endTime – now;

  const days = Math.floor(remaining / (24 * 60 * 60 * 1000));
  const hours = Math.floor((remaining % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const mins = Math.floor((remaining % (60 * 60 * 1000)) / (60 * 1000));
  const secs = Math.floor((remaining % (60 * 1000)) / 1000);

  document.getElementById("demo").textContent = `${days}д ${hours}ч ${mins}м ${secs}с`;

  if (remaining < 0) {
    clearInterval(timer);
    document.getElementById("demo").textContent = "Время истекло";
  }
}, 1000);

Вставьте этот код в HTML, используя элемент с id="demo". Замените YYYY-MM-DDTHH:MM:SS на ту дату и время, к которой ведётся обратный отсчёт. Таймер будет обновлять своё значение каждую секунду и автоматически остановится при достижении заданного времени.

Пошаговое создание универсального таймера обратного отсчёта

Детальный анализ кода и его структуры поможет нам создать точный, модулируемый и многоразовый таймер.

Создание модульного таймера

Улучшим наш таймер, превратив его в универсальный инструмент, используя объектно-ориентированные возможности JavaScript.

Скопировать код

class CountDownTimer {
    constructor(duration, display) {
        this.duration = duration;
        this.display = display;
        this.timer = null;
        this.tickFtns = [];
    }

    start() {
        if (this.timer) { return; }
        this.timer = setInterval(() => {
            this.duration -= 1;
            this.tickFtns.forEach(ftn => ftn(this.duration));
            this.render();
            if (this.duration <= 0) this.reset();
        }, 1000);
    }

    reset() {
        clearInterval(this.timer);
        this.timer = null;
        this.duration = 5 * 60;
        this.render();
    }

    render() {
        const minutes = parseInt(this.duration / 60, 10);
        const seconds = parseInt(this.duration % 60, 10);
        this.display.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    onTick(ftn) {
        if (typeof ftn === 'function') {
            this.tickFtns.push(ftn);
        }
    }
}

const display = document.querySelector('#time');
const timer = new CountDownTimer(300, display);
timer.onTick(currentTime => {
    // Здесь можно реализовать какое-то действие
});
timer.start();

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

Для увеличения точности таймера используем Date.now() для вычисления оставшегося времени.

Скопировать код

let endTime = Date.now() + 300000;

function updateTimer() {
    let remaining = endTime – Date.now();
    if (remaining <= 0) {
        return;
    }
    setTimeout(updateTimer, remaining % 1000 || 1000);
}

updateTimer();

Отслеживание изменений состояния и видимости

Чтобы приложение функционировало корректно в фоновом режиме и при изменении видимости страницы, поможет API видимости страницы.

Скопировать код

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        timer.pause();
    } else {
        timer.resume();
    }
});

Визуализация

Визуализируем таймер, представив отсчёт времени как гонку.

Скопировать код

function countdown(seconds) {
    let count = seconds;
    let timer = setInterval(() => {
        console.log(count + "...");
        if (count == 0) {
            clearInterval(timer);
            console.log("⏲💣 ---> Время вышло!");
        }
        count--;
    }, 1000);
}

countdown(10);

Погружаемся глубже: обогащаем пользовательский опыт от использования таймера обратного отсчёта

Визуальная привлекательность

Сделайте таймер визуально привлекательным с помощью HTML и CSS.

Форматы времени

Предлагайте разные форматы отображения времени для удобства пользователей.

С учетом международного использования

Учитывайте языковые настройки пользователей для международной аудитории.

Приоритет доступности

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

Обеспечение совместимости с браузерами

Таймер должен нормально работать во всех современных браузерах.

Полезные материалы

Глобальная функция setInterval() – Веб-API | MDN — Подробное руководство про setInterval().
Тайминговые события JavaScript — Описание функций таймера в JavaScript на W3Schools.
Создайте таймер обратного отсчёта всего за 18 строк JavaScript — SitePoint — Простой и эффективный таймер без зависимостей.
javascript: приостановить setTimeout(); – Stack Overflow — Обсуждение способов остановки и возобновления таймеров.
Простой таймер обратного отсчёта на JavaScript · GitHub — GitHub Gist с реализацией простого таймера.
Один момент... – CodePen — Пример реализации таймера обратного отсчёта на CodePen.