Categories: CSSJavaScriptУроки программирования

Как создать таймер обратного отсчета с помощью 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 код, а также демо данного способа.

Краткий итог

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

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