Простой таймер обратного отсчета на JavaScript
Переходя на различные сайты в Интернете, Вам, скорее всего, неоднократно встречались различные УТП (уникальные торговые предложения), которые помимо захватывающего внимание описания, дабы подстегнуть Вас сделать покупку, содержали еще и таймер обратного отсчета. Расчет на то, что человек увидев таймер обратного отсчета рядом с надписью "акция на товар закончится через 24 часа", будет, в среднем, более склонен купить товар прямо сейчас, нежели через некоторое время.
И сейчас я покажу Вам простой скрипт на JavaScript - таймер обратного отсчета с помощью которого это можно реализовать:
/**
* класс CountDownTimer
*/
function CountDownTimer(duration,granularity) {
this.duration = duration; // duration in seconds
this.init_duration = duration; // for restart
this.granularity = granularity || 1000;
this.running = false;
this.onStopCallback = undefined;
this.tickFunctions = [];
}
// метод, в который добавляются сосбственные функции
// они будут выполняться при каждом отсчете таймера
CountDownTimer.prototype.onTick = function (callback) {
if (typeof callback == 'function') {
this.tickFunctions.push(callback);
}
return this;
};
/**
* Конвертирует строку времени в формате hh:mm:ss в формат секунд (просто число)
*
*/
CountDownTimer.toSeconds = function (str) {
// разбиваем строку на составляющие ее части времени
let [hours, minutes, seconds] = str.split(':');
// конвертируем каждую компненту в число (знак плюс перед именем переменной) и суммируем итог
return (+hours) * 3600 + (+minutes) * 60 + (+seconds);
};
/**
* Конвертируем время в виде секунд в объект времени
*
* @param seconds
* @returns {{hours: number, seconds: number, minutes: number}}
*/
CountDownTimer.toTimeObject = function (seconds) {
return {
hours: ( seconds / 3600) | 0, // получаем количество часов и преобразуем их в число операторм |
minutes: ((seconds / 60) | 0) % 60, // вытаскиваем минуты
seconds: ( seconds % 60) | 0 // и секунды
};
};
/**
* Форматируем объект времени добавляя к каждой компоненте лидирующий ноль
*
* @param time object
* @returns {string} formatted string
*/
CountDownTimer.addLeadingZero = function (time) {
let hours = time.hours < 10 ? '0' + time.hours : time.hours;
let minutes = time.minutes < 10 ? '0' + time.minutes : time.minutes;
let seconds = time.seconds < 10 ? '0' + time.seconds : time.seconds;
return hours + ':' + minutes + ':' + seconds;
};
/**
* Конвертируем секунды в строку времени формата hh:mm:ss
*/
CountDownTimer.format = function (seconds) {
return CountDownTimer.addLeadingZero(CountDownTimer.toTimeObject(seconds));
};
/**
* Метод, запускающий таймер
*
*/
CountDownTimer.prototype.start = function () {
// если таймер уже запущен, просто выходим
if (this.running) {
return;
}
// флаг, сигнализирующий о том, что таймер запущен
this.running = true;
// that - сохраняем ссылку на текующий контекст, diff - внутрений счет оставшихся секунд
let that = this, diff;
// сама функция timer
(function timer() {
diff = that.duration--; // минус одна секунда при итерации
// если таймер не дошел до нуля
if (diff > 0) {
// вызывать функцию timer через секунду
setTimeout(timer, that.granularity);
} else {
// если время вышло
diff = 0;
that.running = false;
// если нам есть что сделать при окончании времени, вызываем callback
if( that.onStopCallback ) that.onStopCallback.call(that);
return; // обязательно выходим из таймера
}
// поочередно вызываем все функции-обработчики при каждом
// отсчете таймера
that.tickFunctions.forEach(function(callback) {
callback.call(this, diff);
}, that);
}());
};
// данный метод срабатывает когда отсчет таймер достиг нуля
CountDownTimer.prototype.onStop = function(callback) {
this.onStopCallback = callback;
return this;
};
Пример работы на странице:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS.Countdown</title>
<script src="src/CountDownTimer.js"></script>
<style>
.time {
padding: 5px;
display: inline-block;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:20</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:12</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:15</span> сек.</div>
<div>Регистрация на мероприятие будет закрыта через <span class="time">00:00:10</span> сек.</div>
<script>
let tags = document.querySelectorAll('.time');
for(let tag of tags)
{
// продолжительность таймера задана в теге span с классом .time
// оттуда и берем
let duration = CountDownTimer.toSeconds(tag.innerText);
// создаем объект таймера
let timer = new CountDownTimer(duration,1000);
// при счете
// добавляем время обратно в тег
timer.onTick((time) => {
tag.innerText = CountDownTimer.format(time)
}).onStop(() => { //
tag.parentElement.style.backgroundColor="#f00";
tag.parentElement.style.color = "#fff";
tag.innerText = "Offer ends!";
}).start();
}
</script>
</body>
</html>
Вот так можно реализовать простой таймер обратного счета (countdown timer) на JavaScript.
-
Создано 03.09.2019 12:45:36
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.