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

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

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

Таймер обратного отсчета — штука практически незаменимая на продающих сайтах. На таких сайтах часто организовываются всевозможные акции, привязанные к временной отметке. В течение определенного времени можно приобрести товар со скидкой. Или же через некоторое время начнется старт продаж. Для всего этого требуется таймер, который будет производить обратный отсчет.

Подобных плагинов достаточно много, мы остановим сегодня свой выбор на вот этом плагине jQuery таймер обратного отсчета. Он достаточно прост в использовании и прекрасно справляется с поставленной задачей. Скачиваем и подключаем необходимые файлы.

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

Как видим, здесь все достаточно очевидно. Есть дни, часы, минуты и секунды. Каждая из частей помещена в свой блок, который мы можем оформить по своему желанию. Если сейчас запустить скрипт, то мы можем увидеть примерно такую картину:

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

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

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

Совсем другая картина 🙂

Ну и, само собой, конфигурация плагина jQuery таймер обратного отсчета. Конфигурация производится в файле timer.js, который мы подключали выше. В нем есть объект config, где мы и можем указать конечную дату. Здесь нам интересны свойства endDate, timeZone и newSubMessage. В свойстве endDate записываем конечную дату. Свойство timeZone отвечает за часовой пояс, который будет использовать таймер в работе. Ну и свойство newSubMessage отвечает за текст, который появится вместо таймера, когда отсчет закончится. Для того, чтобы текст появился, на странице необходимо создать соответствующий пустой элемент:

Пример конфигурации таймера обратного отсчета:

На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)