Вы здесь: Главная » jQuery » Таймер обратного отсчета с помощью плагина jQuery

Таймер обратного отсчета с помощью плагина jQuery

Таймеры обратного отсчета сейчас очень популярны. Они используются для интернет-магазинов, посадочных страниц (landing page), страниц с сообщениями о техобслуживании сайта.

Один из очень удачных вариантов для такого таймера - FlipClock - jQuery плагин, который построен на CSS3 + jQuery. Он позволяет задать несколько параметров, которые наверняка пригодятся вам для работы.

Flip clock - таймер обратного отсчета

Чтобы подключить плагин, нужно скачать его с официального сайта и записать следующие строчки в блоке  head и body:

Обратите внимание, что в блоке head в теге <link> загрузить нужно файл flipclock.css, а также указать путь к jQuery (FlipClock работает с этой библиотекой, начиная с версии 1.7)  и к файлу плагина flipclock.min.js.

Теперь нужно добавить дополнительные теги script, в которых плагин необходимо инициализировать, т.е. вызвать его код:

Или вторым способом:

Обратите внимание, что оба этих примера будут выполнять одни и те же действия. Используйте тот синтаксис, который вам понятней и ближе :).

Параметры плагина (опции):

  • autoStart - автоматический старт (логическое). Если этот параметр установлен на false, часы не начнут авто. Значение по умолчанию true.
  • countdown  - обратный отсчет (логическое). Если этот параметр установлен как true, таймер отсчитывает время в обратную сторону. Значение по умолчанию false.
  • callbacks - функции обратного вызова (объект). Объект функций обратного вызова, которые вызываются в различные моменты времени. Для получения более подробной информации, просмотреть документацию обратного вызова.
  • classes - классы (объект). Это объект CSS-классов, которые можно использовать для добавления к объектам DOM
  • clockFace - циферблат (строка). Это название часов, которые используются для отображения внешнего вида таймера. Значение по умолчанию HourlyCounter.
  • defaultClockFace (строка). Это внешний вид часов по умолчанию, который используется, если определение циферблата не существует, т.е. не задано значение clockFace. Значение по умолчанию HourlyCounter, т.е.  использование часов, минут, секунд. Может быть DailyCounter (плюс дни), MinuteCounter (только минуты и секунды)
  • defaultLanguage - язык по умолчанию (строка) Это язык, который используется по умолчанию. Значение по умолчанию english (английский).
  • language - язык, на котором выводится запись "days", "hours", "minutes","seconds". Достаточно много языков поддерживает плагин, например, датский, арабский и даже китайский. Можно поставить русский (значения "ru", "ru-ru", "russian":

Методы, используемые в плагине FlipClock:

start() - этот метод запуска часов. Нужно просто вызвать метод .start () на объекте FlipClock.

stop() - метод остановит часы.

setTime () - этот метод установки времени часов после того, как был создан экземпляр

setCountdown () -  метод изменит вид отсчета (вверх или вниз)

getCountdown() - возвращает true или false и указывает, идет ли обратный отсчет на циферблате.

getTime () - нужен, чтобы получить время на часах после создания переменной:

reset()  сбрасывает часы до первоначального значения. Этот метод является цепным.

getFaceValue() - возвращает значение счетчика.

setFaceValue(value) - устанавливает значение счетчика. Этот метод является цепным.

Callbacks (функции обратного вызова)

  • destroy (уничтожить) - инициируется, когда таймер будет уничтожен
  • create (создать) - инициируется, когда циферблат будет создан
  • init (инициализировать) - вызывается, когда объект FlipClock инициализирован
  • interval (интервал) - инициируется с каждым интервалом таймера
  • start (начало) - инициируется, когда часы запускают
  • stop (стоп) - инициируется, когда часы остановлены
  • reset (сброс) - инициируется, когда таймер сбрасывается

События FlipClock

FlipClock имеет полнофункциональный API событий. События инициируются практически каждым объектом и для каждого выполняемого действия. По замыслу рекомендуется всегда использовать события поверх обратных вызовов, если вы находитесь в ситуации, когда задаете себе вопрос, какой из них использовать. Если вам не хватает нужного вам события, обязательно отправьте запрос на удаление или проблему на Github. Документация по событиям на оффсайте.

on() - свяжет событие с объектом и вернет новый объект FlipClock.Event.

once() - связывает событие с объектом и позволяет ему сработать только один раз. Возвращает новый объект FlipClock.Event.

off() - удаляет все события с определенным именем, созданным для объекта. Этот метод является цепным.

trigger() - запускает событие для объекта. Этот метод является цепным.

Пример использования плагина обратного отсчета

Рассмотрим вариант, который часто может использоваться на посадочных страницах, которые сообщают о том, что акция закончится, например, через 2 дня. Причем, если вы заходите через день или через неделю, то все так же до конца акции остается 2 дня. Для этого ко времени начальной даты (сегодняшней) прибавим время в секундах, которое чуть меньше 2 суток (2*24*60*60):

Посмотрим сам пример в действии (открыть в новой вкладке).


Надеюсь, что плагин вам пригодится. Следует отметить, что он не нов, но тем не менее работает.

Вы можете посмотреть реализацию других таймеров обратного отсчета в статье 9 Free Open Source Flipping Clocks Using CSS and JavaScript, правда, на английском языке.

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

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