Топ плагінів jQuery. Плагін таймер зворотного відліку

10

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Говорячи про Топі плагінів, неможливо обійти стороною плагіни, що дозволяють реалізувати для сайту таймер зворотного відліку. Давайте познайомимося з таким плагіном jQuery таймер зворотного відліку.

Таймер зворотного відліку — штука практично незамінна на продають сайтах. На таких сайтах часто організовуються всілякі акції, прив’язані до тимчасової позначці. Протягом певного часу можна придбати товар зі знижкою. Або ж через деякий час почнеться старт продажів. Для всього цього потрібно таймер, який буде проводити зворотний відлік.

Подібних плагінів досить багато, ми зупинимо свій вибір на ось цьому плагіні jQuery таймер зворотного відліку. Він досить простий у використанні і чудово справляється з поставленим завданням. Завантажуємо і підключаємо необхідні файли.

Далі нам знадобиться певна розмітка для роботи jQuery таймера зворотного відліку, виглядає вона приблизно так:

DAYS
:
HOURS
:
MINUTES
:
SECONDS

Як бачимо, тут все досить очевидно. Є дні, години, хвилини і секунди. Кожна з частин поміщена в свій блок, який ми можемо оформити за своїм бажанням. Якщо зараз запустити скрипт, то ми можемо побачити приблизно таку картину:

Топ плагинов jQuery. Плагин таймер обратного отсчета

Все правильно, jQuery таймер адже неоформлен. Оформлення ви можете скласти самі, під дизайн вашого сайту… ну або ж взяти файл стилів з исходников таймера.

Топ плагинов jQuery. Плагин таймер обратного отсчета

Зовсім інша картина :)

Ну і, само собою, конфігурація плагін jQuery таймер зворотного відліку. Конфігурація проводиться у файлі timer.js, який ми підключали вище. У ньому є об’єкт config, де ми і можемо вказати кінцеву дату. Тут нам цікаві властивості a list, timeZone і newSubMessage. Властивості a list записуємо кінцеву дату. Властивість timeZone відповідає за часовий пояс, який буде використовувати таймер в роботі. Ну і властивість newSubMessage відповідає за текст, який з’явиться замість таймера, коли відлік закінчиться. Для того, щоб текст з’явився на сторінці, необхідно створити порожній елемент:

Приклад конфігурації таймера зворотного відліку:

var config = {
a list: ‘2017-03-01 12:00’, // 12 годин 1 березня 2017 року
timeZone: ‘Europe/Kiev’, // Київський час
hours: $(‘#hours’),
minutes: $(‘#minutes’),
seconds: $(‘#seconds’),
newSubMessage: ‘and should be back online in a few minutes…’
};

На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!