Часто программистам ставят задачу создать таймер обратного отсчета, например, когда у клиента намечается важное мероприятие, распродажа или он хочет запустить рекламную акцию. С точки зрения маркетинга, с таймерами обратного отсчета все понятно: таймеры способны стимулировать продажи. Таймер обратного отсчета – лучший способ продемонстрировать, что скоро «карета превратится в тыкву» и клиенту нужно поторопиться. Используя срочность и ограниченность во времени, маркетологи побуждают клиентов быстрее совершать покупки.
Волнительное предвкушение предстоящего события заразительно и захватывает все ваше внимание. Возможно даже, что это заставляет вас нервничать и торопиться. Обратный отсчет завораживает и заставляет вас с нетерпением смотреть, как отсчитываются секунды до выходных, свадьбы, канікул, Нового года или выхода на пенсию.
В сегодняшнем уроке мы рассмотрим несколько вариантов создания простых таймеров обратного отсчета, которые будут отсчитывать минуты и секунды до какого-то важного предстоящего события.
Вы можете использовать таймеры обратного отсчета для бизнес-предложений, в интернет-магазине, при распродажах, для предстоящего вебинара.
Таймеры обратного отсчета будут уместны, когда требуется:
Теперь давайте на примерах более детально рассмотрим каждый из этих способов.
Вы можете создать часы с обратным отсчетом на чистом (vanilla) JavaScript и не искать какой-то навороченный плагин. Вот лишь в нескольких строках JavaScript кода пример часов обратного отсчета.
<style> /* немного CSS стилей для оформления таймера */ #deadline-timer {color: red; font-weight: bold;} </style> <!-- отображаем таймер обратного отсчета в элементе ниже --> <div id="time-remainer">Срок действия скидки заканчивается через <span id="deadline-timer">05:00</span> <span id="min-or-sec">минут</span>!</div> <script> var kolichestvoMinut = 5; // желаемое время таймера в минутах (5 минут) var tekuscheyeVremya = new Date(); // получаем сегодняшнюю дату и время var deadlineTime = tekuscheyeVremya.setMinutes(tekuscheyeVremya.getMinutes() + 5); // устанавливаем таймер на 5 минут //var deadlineTime = new Date( new Date().getTime() + (kolichestvoMinut * 60 * 1000) ); // можно и так установить таймер на 5 минут // обновляем скрипт каждую секунду – так мы получаем обратный отсчет var obratniyOtschet = setInterval(function() { var seychas = new Date().getTime(); // текущее время var ostatokVremeni = deadlineTime - seychas; // находим различие между текущим моментом и временем дедлайна // преобразовываем значение миллисекунд в минуты и секунды var minuti = Math.floor( (ostatokVremeni % (1000 * 60 * 60)) / (1000 * 60) ); var secundi = Math.floor( (ostatokVremeni % (1000 * 60)) / 1000 ); // если значение текущей минуты или секунды меньше 10, добавляем вначале ведущий ноль minuti = minuti < 10 ? "0" + minuti : minuti; secundi = secundi < 10 ? "0" + secundi : secundi; // отображаем результат таймера в элементе с id="deadline-timer" document.getElementById("deadline-timer").innerHTML = minuti + ":" + secundi; // если в таймере остались только секунды, меняем слово "минуты" на "секунды" if (minuti == 0) { document.getElementById("min-or-sec").innerHTML = "секунд"; } // когда обратный отсчет закончился, отображаем соответствующее уведомление if (ostatokVremeni < 0) { clearInterval(obratniyOtschet); document.getElementById("time-remainer").innerHTML = "<h2>Время истекло!</h2>"; } }, 1000); </script>
Ниже представлен весь JavaScript код, а также демо данного способа.
Для данного способа используется простая логика – мы скрываем с помощью ключевых кадров (keyframes
) CSS определенные блоки с цифрами, и показываем другие. Например, десятые доли секунды должны сменяться каждую секунду, соответственно длительность анимации (animation-duration
) должна составлять 60 секунд, а количество итераций для данной анимации также должна составлять 60 (60/60 = 1 секунда). Для минут математические расчеты анимации немного сложнее, но придерживаются такой же логики.
Ниже представлен весь HTML и CSS код, а также демо данного способа. В данном примере таймер так же, как и в предыдущем примере, установлен на 5 минут.
В данном примере используется комбинация двух предыдущих способов (CSS + JavaScript), а также используется технология SVG для визуального оформления циферблата таймера. Здесь ячейки каждой из цифр состоят из 7 фигур polygon
, которые с помощью ключевых кадров (keyframes
) CSS определенное время показываются (либо скрываются – с помощью свойства прозрачности для объекта SVG – fill-opacity
). Таким образом, мы и создаем иллюзию включения/выключения циферблата таймера обратного отсчета. Каждая цифра имеет свою отдельную последовательность CSS-анимации для каждой из 7 фигур polygon
, соответственно для 4-значного циферблата (00:00) нужно создать 28 анимаций. Поскольку наш таймер ограничен 5-ью минутами, первый, ведущий минутный ноль не имеет анимаций, соответственно общее количество анимаций сокращается до 21.
Анимации задают смену прозрачности фигур через определенное время (с помощью свойства длительности анимации – animation-duration
). Так, например, единичные секундные элементы должны сменяться каждую секунду (animation-duration: 10s;
), десятичные секундные элементы сменяются раз в минуту (animation-duration: 60s;
) и так далее.
Использование JavaScript в данном способе сведено к минимуму – с его помощью мы лишь устанавливаем таймаут на 5 минут, чтобы по их истечению показать соответствующее уведомление. Основную работу здесь выполняют ключевые кадры CSS, а с помощью SVG фигур мы создаем масштабируемый циферблат. Вот и все!
Ниже представлен весь HTML, SVG, CSS и JavaScript код, а также демо данного способа.
Надеемся, что данный урок был для вас практически полезным! Попробуйте на базе данных теоретических основ создать свой, более продвинутый таймер обратного отсчета. Успешного кодирования вам!
В качестве бонуса ниже представлен простой таймер обратного отсчета, который показывает оставшееся время до Нового года:
Если хочешь узнать человека, не слушай, что о нем говорят другие, послушай, что он говорит…
Извинение — не означает, что ты не прав, а другой человек прав. Это всего лишь…
Атмосферу бумажной книги, запах свежих чернил и чуть залежавшейся бумаги сложно заменить гаджетами. Но электронные…
Действуй так, словно неудача просто невозможна, а успех обеспечен Робин Шарма