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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

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

  1. dimitriyyuliya@gmail.com

    Добрый день, установил плагин, отлично работает, только на 30 дней, если ставлю 31 и больше, то отчёт начинается с 0. Можно настроить чтобы считал любое количество дней до указанной даты?

    • Андрей

      Добрый день, Дмитрий. Очевидно, данный плагин рассчитан максимум на 30 дней (в большинстве случаев этого более чем достаточно). Поэтому варианта 2: 1) либо копаться в его коде и разбираться; 2) либо подыскать другой плагин, который будет поддерживать более 30 дней.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree