Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 27.05.2022)
29750
осіб
206
літаків
170
гелікоптерів
1322
танків
3246
ББМ
623
артилерія
93
ППО
201
РСЗВ
2226
машин
13
кораблі і катери
Як створити таймер зворотного відліку за допомогою JavaScript, CSS та SVG (4 способи)

Як створити таймер зворотного відліку за допомогою 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 код, а також демо цього способу.

 

 

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

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

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

 

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.