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