Таймер обратного отсчёта
Вступление
Практически в каждом продающем лендинге используется таймер обратного отсчёта, информирующий о сроке окончания некой акции. С помощью этой статьи вы разберётесь, как сверстать такой таймер и как работает скрипт, обеспечивающий отсчёт в обратную сторону до конца суток. Собственно, именно поэтому он и называется «таймер обратного отсчёта». Естественно, код мы будем писать на чистом JavaScript.
HTML разметка таймера обратного отсчёта.
Сама вёрстка очень простая и не требует особых комментариев:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="timer-box"> <div class="timer"> <ul class="flex"> <li id="hour"></li> <li id="minutes"></li> <li id="seconds"></li> </ul> </div> <ul class="flex time-name"> <li>часы</li> <li>минуты</li> <li>секунды</li> </ul> </div> |
Пара комментариев к представленной HTML вёрстке:
В блоке <div class="timer"><div> c помощью немаркированного списка <UL> выводится сам таймер обратного отсчёта, отсчитывающий часы, минуты и секунды.
С помощью списка <ul class="flex time-name"></ul> выводятся названия элементов таймера.
Таблица стилей для таймера обратного отсчёта
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.flex { display: flex; } .timer-box { width: 385px; height: 180px; padding-top: 50px; background: #111; } .timer-box ul { width: 285px; } .timer { width: 285px; height: 70px; margin: 0 auto 5px; background: url('bg_timer.png') no-repeat; } .timer li { width: 85px; height: 70px; font-size: 60px; line-height: 68px; color: #e1e1e1; letter-spacing: 10px; position: relative; padding-left: 4px; } .timer li + li:before { width: 15px; height: 70px; display: block; font-size: 60px; line-height: 58px; content: ':'; position: absolute; left: -14px; top: 0; } .time-name { margin: 0 auto; } .time-name li { width: 85px; font-size: 12px; color: #888; text-align: center; } .timer li + li, .time-name li + li { margin-left: 15px; } |
Более подробно рассматривать вёрстку и таблицу стилей мы не будем, т. к. наша основная задача — изучить работу js-скрипта, обеспечивающего работу таймера обратного отсчёта.
Одно маленькое дополнение. С помощью стиля .timer li + li:before выводится двоеточие, разделяющее между собой часы, минуты и секунды.
JavaScript управления таймером обратного отсчёта.
Для ограничения области видимости, разместим скрипт в анонимной самозапускающейся функции.
|
1 2 3 4 5 6 |
;(function() { 'use strict'; })(); |
Объявим несколько переменных и присвоим им значения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// значение времени на момент запуска скрипта const now = new Date(); // объекты, в которые будем выводить показания таймера const hBox = document.getElementById('hour'), mBox = document.getElementById('minutes'), sBox = document.getElementById('seconds'); // массив данных в котором находятся значения оставшихся до // конца суток часов, минут и секунд соответственно, которые // мы получаем путём вычитания из их максимального значения текущего let times = [ 23 - now.getHours(), 59 - now.getMinutes(), 59 - now.getSeconds(), ]; |
Показания таймера формируются функцией timer, аргументом которой является массив times.
Работа функции timer основана на внутреннем таймере-планировщике setInterval, запускающим код пересчёта показаний таймера обратного отсчёта один раз в секунду. На экран значения выводятся с помощью функции showTimer, аргументами которой являются часы, минуты и секунды, полученные в результате работы timer.
Итак, запускаем таймер обратного отсчёта:
|
1 2 3 |
timer(times); |
Код функции timer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const timer = times => { // объявляем идентификатор таймера и запускаем функцию 'setInterval' let tm = setInterval(() => { // уменьшаем значение секунд на 1 times[2]--; // проверяем, не обнулился ли таймер и если да, то останавливаем 'setInterval' if (times[0] == 0 && times[1] == 0 && times[2] == 0) { clearInterval(tm); } else if (times[2] == -1) { // если секунды имеют отрицательное значение, это значит, что // они перешли 0 и должен начаться отсчёт новой минуты, // при этом секунды становятся равными своему максимальному значению - 59, // а минуты уменьшаются на 1 times[2] = 59; times[1]--; } else if (times[1] == -1) { // аналогично, как для минут и секунд // минуты выставляем в значение 59, а час уменьшаем на 1 times[1] = 59; times[0]--; } // если показания или часов, или минут, или секунд меньше 10, // ставим перед показанием ноль let h = (times[0] < 10) ? '0' + times[0] : times[0], m = (times[1] < 10) ? '0' + times[1] : times[1], s = (times[2] < 10) ? '0' + times[2] : times[2]; // выводим значение таймера на экран showTimer(h, m, s); }, 1000); } |
И, наконец, код функции, отображающей текущее значение таймера на экране. Аргументами этой функции буду вычисленные значения часов, минут и секунд:
|
1 2 3 4 5 6 7 |
const showTimer = (hour, min, sec) => { hBox.innerHTML = hour; mBox.innerHTML = min; sBox.innerHTML = sec; } |
Вот и весь код таймера обратного отсчёта. Как видите, абсолютно ничего сложного здесь нет, как и нет необходимости в подключении библиотеки jQuery для его реализации.
Комментарии
-
Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
Комментарии содержащие обсуждение политики, будут безжалостно удаляться. -
Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега
<pre>:
—<pre class="lang:xhtml">- HTML;
—<pre class="lang:css">- CSS;
—<pre class="lang:javascript">- JavaScript. - Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.
Лучший обратный таймер, который установился на MODX Revo!