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

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

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

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

<html>
  <head>
     <link rel="stylesheet" href="/assets/css/flipclock.css">
  </head>
  <body>
     <div class="your-clock"></div>
     <script src="/assets/js/libs/jquery.js"></script>
     <script src="/assets/js/flipclock/flipclock.min.js"></script>
  </body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

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

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

<script>   
   var clock = $('.your-clock').FlipClock({
     // ваши параметры
   });
</script>

var clock = $('.your-clock').FlipClock({

// ваши параметры

});

</script>

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

<script>   
   var clock = new FlipClock($('.your-clock'), {
     // ваши параметры
   });
</script>

var clock = new FlipClock($('.your-clock'), {

// ваши параметры

});

</script>

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

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

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

var clock = $('.clock').FlipClock({ clockFace: 'DailyCounter' });

1
2
3

var clock = $('.clock').FlipClock({
clockFace: 'DailyCounter'
});
defaultLanguage - язык по умолчанию (строка) Это язык, который используется по умолчанию. Значение по умолчанию english (английский).
language - язык, на котором выводится запись "days", "hours", "minutes","seconds". Достаточно много языков поддерживает плагин, например, датский, арабский и даже китайский. Можно поставить русский (значения "ru", "ru-ru", "russian":

var timer = $('#timer').FlipClock({ language: "ru" });

1
2
3

var timer = $('#timer').FlipClock({
language: "ru"
});

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

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

clock.start (function() {
   // функция, запускаемая каждый раз, когда часы переворачиваются
});

clock.start (function() {

// функция, запускаемая каждый раз, когда часы переворачиваются

});

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

clock.stop (function() {
   // функция обратного вызова будет вызвана после того, как часы останавливаются. Необязательна
});

clock.stop (function() {

// функция обратного вызова будет вызвана после того, как часы останавливаются. Необязательна

});

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

clock.setTime (3600);

1	clock.setTime (3600);

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

clock.setCountdown (true);

1	clock.setCountdown (true);

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

clock.setCountdown(true);

1	clock.setCountdown(true);

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

var time  = clock.getTime(); // возвращает объект FlipClock.Time

1	var time = clock.getTime(); // возвращает объект FlipClock.Time

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

clock.reset(function() {
  // код функции обратного вызов сработает после сброса часов
});

clock.reset(function() {

// код функции обратного вызов сработает после сброса часов

});

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

var time  = clock.getFaceValue();

1	var time = clock.getFaceValue();

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

clock.setFaceValue(value);

1	clock.setFaceValue(value);

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

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

События FlipClock

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

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

var event = clock.on('some:event' function() {
  // Этот код будет срабатывать каждый раз при наступлении события
});

var event = clock.on('some:event' function() {

// Этот код будет срабатывать каждый раз при наступлении события

});

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

clock.once('some:event' function() {
  // Этот код выполнится один раз
});

clock.once('some:event' function() {

// Этот код выполнится один раз

});

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

clock.off('some:event');

1	clock.off('some:event');

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

clock.trigger('some:event', 'some_value');

1	clock.trigger('some:event', 'some_value');

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

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

<div id="timer"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/flipclock.min.js"></script>
<script>
  var startDay = new Date();
  var endDay = startDay.getTime() + 172700;
  var delta = endDay - startDay.getTime();  
  var timer = $('#timer').FlipClock(delta, {
  	clockFace: 'DailyCounter',
  	countdown: true,
  	language: "ru"
  });
</script>

var startDay = new Date();

var endDay = startDay.getTime() + 172700;

var delta = endDay - startDay.getTime();

var timer = $('#timer').FlipClock(delta, {

clockFace: 'DailyCounter',

countdown: true,

language: "ru"

});

</script>

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

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

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

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

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

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

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

События FlipClock

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

Вам может понравиться

Всплывающие (модальные) окна с помощью CSS, JavaScript и jQuery

Способы добавления плавной прокрутки страницы в CSS и JavaScript

Пример использования метода jQuery $.post для AJAX-запросов

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