Як створити таймер зворотного відліку за допомогою JavaScript, CSS та SVG (4 способи)

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

Хвилююче передчуття майбутньої події заразливе і захоплює всю вашу увагу. Можливо навіть, що це змушує вас нервувати і поспішати. Зворотній відлік зачаровує та змушує вас з нетерпінням дивитися, як відраховуються секунди до вихідних, весілля, канікул, Нового року чи виходу на пенсію.

В сьогоднішньому уроці ми розглянемо кілька варіантів створення простих таймерів зворотного відліку, які відраховуватимуть хвилини і секунди до якоїсь важливої події.

Коли використовувати таймер зворотного відліку?

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

Таймери зворотного відліку будуть доречними, коли потрібно:

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

Способи створення таймера зворотного відліку:

Використовувати «чистий» JavaScript або JavaScript бібліотеки (наприклад, jQuery)
Використовувати CSS та/або SVG
Скомбінувати способи: JavaScript + CSS + SVG

Тепер давайте на прикладах детальніше розглянемо кожен із цих способів.

Спосіб створення таймера зворотного відліку №1: на простому JavaScript

Ви можете створити годинник із зворотним відліком на чистому (vanilla) JavaScript і не шукати якогось навороченого плагіну. Ось лише в декількох рядках JavaScript коду приклад годинника зворотного відліку.

<style>
 /* трохи CSS стилів для оформлення таймеру */
 #time-remainer {margin: 100px auto; width: 100%; position: relative; text-align: center; font-size: 25px;}
 #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 kilkistHvilin = 5;  // бажаний час таймера в хвилинах (5 хвилин)
  var potochniyChas = new Date(); // отримуємо сьогоднішню дату та час
  var deadlineTime = potochniyChas.setMinutes(potochniyChas.getMinutes() + 5); // встановлюємо таймер на 5 хвилин
  //var deadlineTime = new Date( new Date().getTime() + (kilkistHvilin * 60 * 1000) ); // можна і так встановити таймер на 5 хвилин
  // оновлюємо скрипт кожну секунду – так ми отримуємо зворотний відлік
  var zvorotniyVidlik = setInterval(function() {
    var zaraz = new Date().getTime(); // поточний час
    var zalishokChasu = deadlineTime - zaraz; // знаходимо різницю між поточним моментом і часом дедлайну
    // перетворюємо значення мілісекунд в хвилини та секунди
    var hvilini = Math.floor( (zalishokChasu % (1000 * 60 * 60)) / (1000 * 60) );
    var secundi = Math.floor( (zalishokChasu % (1000 * 60)) / 1000 );
    // якщо значення поточної хвилини або секунди менше 10, додаємо на початку провідний нуль
    hvilini = hvilini < 10 ? "0" + hvilini : hvilini;
    secundi = secundi < 10 ? "0" + secundi : secundi;
    // показуємо результат таймеру в елементі з id="deadline-timer"
    document.getElementById("deadline-timer").innerHTML = hvilini + ":" + secundi;
    // якщо в таймері залишилися лише секунди, змінюємо слово "хвилини" на "секунди"
    if (hvilini == 0) {
      document.getElementById("min-or-sec").innerHTML = "секунд";
    }
    // коли зворотний відлік закінчився, показуємо відповідне повідомлення
    if (zalishokChasu < 0) {
      clearInterval(zvorotniyVidlik);
      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 код, а також демо цього способу.

Короткий підсумок

Сподіваємося, що цей урок був для вас практично корисним! Спробуйте з урахуванням даних теоретичних основ створити свій, більш просунутий таймер зворотного відліку. Успішного кодування вам!

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