Как создать таймер обратного отсчета с помощью JavaScript, CSS и SVG (4 способа)

Часто программистам ставят задачу создать таймер обратного отсчета, например, когда у клиента намечается важное мероприятие, распродажа или он хочет запустить рекламную акцию. С точки зрения маркетинга, с таймерами обратного отсчета все понятно: таймеры способны стимулировать продажи. Таймер обратного отсчета – лучший способ продемонстрировать, что скоро «карета превратится в тыкву» и клиенту нужно поторопиться. Используя срочность и ограниченность во времени, маркетологи побуждают клиентов быстрее совершать покупки.

Волнительное предвкушение предстоящего события заразительно и захватывает все ваше внимание. Возможно даже, что это заставляет вас нервничать и торопиться. Обратный отсчет завораживает и заставляет вас с нетерпением смотреть, как отсчитываются секунды до выходных, свадьбы, канікул, Нового года или выхода на пенсию.

В сегодняшнем уроке мы рассмотрим несколько вариантов создания простых таймеров обратного отсчета, которые будут отсчитывать минуты и секунды до какого-то важного предстоящего события.

 

Когда уместно использовать таймер обратного отсчета?

Вы можете использовать таймеры обратного отсчета для бизнес-предложений, в интернет-магазине, при распродажах, для предстоящего вебинара.

Таймеры обратного отсчета будут уместны, когда требуется:

  • напомнить, что распродажа скоро начнется (или же завершится)
  • увеличить продажи
  • уведомить об истечении срока действия скидок
  • создать напоминание о завершении пробного периода (trial)
  • напомнить подписчикам о времени начала вебинара
  • подготовить к дате какого-либо розыгрыша (например, в лотерее)

 

 

Способы создания таймера обратного отсчета:

  • Использовать «чистый» JavaScript, или JavaScript библиотеки (например, jQuery)
  • Использовать CSS и/или SVG
  • Скомбинировать способы: JavaScript + CSS + SVG

 

Теперь давайте на примерах более детально рассмотрим каждый из этих способов.

 

Способ создания таймера обратного отсчета №1: на простом JavaScript

Вы можете создать часы с обратным отсчетом на чистом (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 код, а также демо данного способа.

 

Способ создания таймера обратного отсчета №2: на чистом CSS

Для данного способа используется простая логика – мы скрываем с помощью ключевых кадров (keyframes) CSS определенные блоки с цифрами, и показываем другие. Например, десятые доли секунды должны сменяться каждую секунду, соответственно длительность анимации (animation-duration) должна составлять 60 секунд, а количество итераций для данной анимации также должна составлять 60 (60/60 = 1 секунда). Для минут математические расчеты анимации немного сложнее, но придерживаются такой же логики.

Ниже представлен весь HTML и CSS код, а также демо данного способа. В данном примере таймер так же, как и в предыдущем примере, установлен на 5 минут.

 

Способ создания таймера обратного отсчета №3: комбинация SVG + CSS + JavaScript

В данном примере используется комбинация двух предыдущих способов (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 код, а также демо данного способа.

 

Краткий итог

Надеемся, что данный урок был для вас практически полезным! Попробуйте на базе данных теоретических основ создать свой, более продвинутый таймер обратного отсчета. Успешного кодирования вам!

В качестве бонуса ниже представлен простой таймер обратного отсчета, который показывает оставшееся время до Нового года:

 

Recent Posts

Пошаговая инструкция Импорта данных из Excel в MySQL через phpMyAdmin

Этот практический урок поможет вам перенести данные из вашего Excel-файла (с некоторыми конкретными столбцами) в…

2 дня ago

Распространенные мифы и заблуждения о пиве: восстанавливаем справедливость

Пиво – один из самых популярных напитков, который наряду с чаем и кофе известен во…

2 дня ago

Уроки JavaScript — Краткие функции на замену большому объемному коду

Довольно часто у программистов возникает соблазн написать какую-нибудь обширную функцию, которая должна решать определенную задачу.…

1 неделя ago

Зачем и как просыпаться раньше

Дискуссии вокруг этой темы вас, вероятно, уже утомили. Но я в данной статье постараюсь показать…

1 неделя ago

Уроки JavaScript — Шпаргалка для разработчиков по работе с консолью в браузере

Консоль браузера (также известная как консоль JavaScript или веб-консоль) — это мощный инструмент для разработчиков,…

1 неделя ago

Бернард Шоу

Никогда не указывайте на ошибки, если не знаете, как их исправить Джордж Бернард Шоу  

2 недели ago