Далее на странице...
- С чего начать? Дедлайн 1. Текущая дата 2. Дедлайн - крайний срок выполнения задачи
- Конвертация миллисекунд в Дни, Часы, Минуты Остаток часов, минут, секунд
- JS-код для таймера. Алгоритм и Комментарии
Как создается таймер обратного отсчета для сайта на JavaScript.
В нашем случае таймер будет выглядеть как отсчет времени от текущего времени и даты до полуночи этого же дня (в коде также можно будет указать произвольную дату и время).
Время таймера исчисляется в днях, часах, минутах и секундах.
Продолжим работать с проектом, где создавались Табы. Аналогичный таймер обратного отсчетаВы видите ниже.
С чего начать? Дедлайн
Фрагмент HTML-кода для таймера
Скачать Архив с исходными данными
<div class="promotion__timer">
<div class="title">Осталось до конца акции:</div>
<div class="timer">
<div class="timer__block">
<span id="days">12</span>
дней
</div>
<div class="timer__block">
<span id="hours">20</span>
часов
</div>
<div class="timer__block">
<span id="minutes">56</span>
минут
</div>
<div class="timer__block">
<span id="seconds">20</span>
секунд
</div>
</div>
</div>
Исходная страница в Браузере
Изначально таймер обратного отсчета не работает, и мы видим данные из верстки: произвольное число дней, часов, минут и секунд.
С чего следует начинать?
Так как таймер имеет обратный отсчет, то сначала нужна дата, до которой отсчет будет идти.
Должен быть какой-то Дедлайн: он устанавливается в формате Даты и помогает выяснить - сколько осталось до конца "акции"?
Дедлайн - это крайний срок выполнения задачи или работы, определённый момент времени, к которому должна быть достигнута цель или задача.
Итак, нужно реализовать функционал для определения разницы между временем. На этом этапе нужно будет определить, сколько времени установлено у пользователя - то есть нужна текущая дата. И затем, зная Дедлайн, найти разницу во времени в миллисекундах (далее переменная t). Эта разница во времени и будет отображаться на экране, как таймера обратного отсчета в формате: дни, часы, минуты и секунды.
Разницу t между Дедлайн-ом (в данном случае - это полночь текущего дня) и текущей датой мы получим в миллисекундах. Таким образом...
Прежде чем приступать к созданию таймера обратного отсчета для сайта, необходимо понимать, как из числа миллисекунд получить число дней, часов, минут и секунд.
Конвертация миллисекунд в Дни, Часы, Минуты
Как посчитать дни?
Как число миллисекунд конвертировать в дни?
Нужно исходное число миллисекунд t (разницу между Дедлайн-ом и текущей датой) разделить на число миллисекунд содержащихся в сутках.
days = t / (1000 * 60 * 60 * 24)
И далее полученное число округлить - за это отвечает метод floor объекта Math.
days = Math.floor(t / (1000 * 60 * 60 * 24))
Сколько миллисекунд содержится в сутках?
1000 - миллисекунд содержится в секунде;
1000 x 60 - формула для подсчета миллисекунд в минуте: 1000 умножаем на 60 секунд содержащихся в минуте - 60 000.
1000 x 60 x 60 - формула для подсчета миллисекунд в часе: добавляется 60 минут содержащихся в часе - 3 600 000.
1000 x 60 x 60 x 24 - формула для подсчета миллисекунд в сутках: добавляется 24 часа -86 400 000.
Как посчитать остаток часов?
Важно понять следующее: здесь/для таймера обратного отсчета нужно получить не общее число часов, содержащееся в количестве миллисекунд t, а число часов, оставшееся от числа дней.
Как это сделать?
Нужно взять/получить остаток от деления общего числа часов на 24.
То есть общее число часов нужно разделить с остатком на 24 часа. Получаем число дней, а остаток от деления - это оставшееся число часов.
hours = t / (1000 * 60 * 60) % 24
Как посчитать остаток минут?
Нужно взять/получить остаток от деления общего числа минут на 60.
То есть общее число минут нужно разделить с остатком на 60 минут/в часе. Получаем число часов, а остаток от деления - это оставшееся число минут.
minutes = t / (1000 * 60) % 60
Как посчитать остаток секунд?
Нужно взять/получить остаток от деления общего числа секунд на 60.
То есть общее число секунд нужно разделить с остатком на 60 секунд/в минуте. Получаем число минут, а остаток от деления - это оставшееся число секунд.
seconds = t / 1000 % 60
JS-код для таймера. Алгоритм и Комментарии
Рассмотрим алгоритм и порядок создания таймера обратного отсчета для сайта.
1. Нужен Дедлайн.
2. Должна быть функция, которая вычислять и возвращать элементы таймера - начальное число дней, часов, минут и секунд.
3. Должна быть функция, которая будет заниматься обновлением таймера - он каждый раз должен изменяться на 1 секунду и так постепенно - на минуты, часы и дни.
JavaScript-код
'use strict';
// Текущая дата
const now = new Date();
// Установка полуночи для указанной даты. Возвращает Дедлайн
function setMidNight(date) {
let midNight = date;
midNight.setHours(24);
midNight.setMinutes(0);
midNight.setSeconds(0);
midNight.setMilliseconds(0);
const deadline = midNight;
return deadline;
}
// Функция для вычисления значений таймера: аргумент - Дедлайн
function getTimeRemaining(endTime) {
// Разница в миллисекундах между Дедлайном и текущей датой
const t = Date.parse(endTime) - Date.parse(new Date());
let days,
hours,
minutes,
seconds;
if (t <= 0) {
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
}
else {
days = Math.floor(t / (1000 * 60 * 60 * 24)); // число дней
hours = Math.floor(t / (1000 * 60 * 60) % 24); // ОСТАТОК часов
minutes = Math.floor(t / (1000 * 60) % 60); // ОСТАТОК минут
seconds = Math.floor(t / 1000 % 60); // ОСТАТОК секунд
}
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
// Добавляется 0 к числу, если оно меньше 10
function getZero(num) {
if (num >= 0 && num < 10) {
return `0${num}`;
}
else {
return num;
}
}
// Установка времени и обновление Таймера
function setClock(selector, endTime){
// получаем доступ к блоку "Таймер" и дочерним элементам
const timer = document.querySelector(selector), // '.timer'
days = timer.querySelector('#days'),
hours = timer.querySelector('#hours'),
minutes = timer.querySelector('#minutes'),
seconds = timer.querySelector('#seconds'),
// Функция обновления таймера запускается каждую секунду
timeInterval = setInterval(updateClock, 1000);
updateClock(); // Функция первый раз запускается через 1 секунду - см. код выше
// Поэтому в 1-ю секунду на странице отображаются значения таймера из верстки.
// Чтобы этого не было - функция updateClock вызывается здесь
// Функция обновления таймера
function updateClock() {
// Заносим в переменную t объект, который возвращает функция getTimeRemaining
const t = getTimeRemaining(endTime);
// Вставка значений на страницу
days.innerHTML = getZero(t.days);
hours.innerHTML = getZero(t.hours);
minutes.innerHTML = getZero(t.minutes);
seconds.innerHTML = getZero(t.seconds);
// Если разница в миллисекундах между Дедлайном и текущей датой <= 0
// Функция обновления таймера - СТОП
if (t.total <= 0) {
clearInterval(timeInterval);
}
}
}
setClock('.timer', setMidNight(now));
Результат в Браузере
Начинаем с текущей даты. Также получаем Дедлайн - строка №7.
В данном случае для получения Дедлайн-а создается функция "Установка полуночи для указанной даты" setMidNight(), которая возвращает Дедлайн.
Таким образом, этот таймер работает всегда: всегда есть текущая дата и всегда есть время полуночи для текущей даты.
Почему дата берется в виде строки? В проектах ДАТА часто берется из тега input, который возвращает строку.
строка №20 Функция для получения разницы времени между Дедлайн-ом и текущим временем, то есть разницы между датами и вычисления значений для таймера - function getTimeRemaining().
3. Внутри функции getTimeRemaining().
3.1 Получаем разницу в миллисекундах между Дедлайн-ом и текущим временем:
const t = Date.parse(endTime) - Date.parse(new Date()).
При этом чтобы разобрать строковое представление даты (если это строка) и вернуть количество миллисекунд, используется метод parse.
3.2 Если число миллисекунд t меньше или равно 0, то таймер обнуляется.
3.3 Положительное число миллисекунд t конвертируется в дни; остаток часов, минут и секунд.
3.4 Функции getTimeRemaining() возвращает объект - общее число миллисекунд t и значения дней, часов, минут и секунд для таймера.
строка №63 Функция для установки значений времени на страницу и обновления Таймера setClock(selector, endTime).
1. Получаем доступ к DIV-у с таймером и через него к блокам для значений.
2. Функция updateClock() работает с объектом (который возвращает функция getTimeRemaining()) - со значениями для таймера и вставляет эти значения на страницу.
3. Функция обновления таймера updateClock() запускается каждую секунду.
И так как, текущее время "идет", то каждую секунды изменяется и время таймера - становится видно, как меняется значение секунд.
строка №99 Функция setClock('.timer', setMidNight(now)); запускает весь скрипт.
1-ый аргумент функции setClock() - указывается селектор, через который получаем доступ к блоку с таймером.
2-ой аргумент функции setClock() - это Дедлайн, который возвращает функция setMidNight() и который передается в функцию getTimeRemaining() для получения значений для таймера.
