Часто програмістам ставлять завдання створити таймер зворотного відліку, наприклад, коли у клієнта намічається важливий захід, розпродаж або він хоче запустити рекламну акцію. З погляду маркетингу, з таймерами зворотного відліку все зрозуміло: таймери здатні стимулювати продажі. Таймер зворотнього відліку – найкращий спосіб продемонструвати, що незабаром «карета перетвориться на гарбуз» і клієнту треба поквапитися. Використовуючи терміновість та обмеженість у часі, маркетологи спонукають клієнтів швидше робити покупки.
Хвилююче передчуття майбутньої події заразливе і захоплює всю вашу увагу. Можливо навіть, що це змушує вас нервувати і поспішати. Зворотній відлік зачаровує та змушує вас з нетерпінням дивитися, як відраховуються секунди до вихідних, весілля, канікул, Нового року чи виходу на пенсію.
В сьогоднішньому уроці ми розглянемо кілька варіантів створення простих таймерів зворотного відліку, які відраховуватимуть хвилини і секунди до якоїсь важливої події.
Ви можете використовувати таймери зворотного відліку для бізнес-пропозицій, в інтернет-магазині, під час розпродажів, для майбутнього вебінару.
Таймери зворотного відліку будуть доречними, коли потрібно:
Тепер давайте на прикладах детальніше розглянемо кожен із цих способів.
Ви можете створити годинник із зворотним відліком на чистому (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 код, а також демо цього способу.
Для даного способу використовується проста логіка – ми приховуємо за допомогою ключових кадрів (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 код, а також демо цього способу.
Сподіваємося, що цей урок був для вас практично корисним! Спробуйте з урахуванням даних теоретичних основ створити свій, більш просунутий таймер зворотного відліку. Успішного кодування вам!
В якості бонусу нижче представлений простий таймер зворотного відліку, який показує час, що залишився до Нового року:
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…