Создание легкого циклического таймера обратного отсчета на JS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
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.