FlipClock - счетчик на jQuery

FlipClock - jQuery плагин для отсчета времени на сайте. Незаменимая вещь для лендинга, предлагающего "горящую" услугу. Именно на таком сайте нужен таймер обратного отсчета FlipClock.

Для работы плагина требуется jQuery 1.7.x и выше. Ниже приведены требования, которые были учтены при создании jQuery-таймера:

Использовать как часы
Использовать как таймер обратного отсчета
Максимальное использование CSS
Полнофункциональный API
Возможность создания пользовательского “циферблата”

Установка и подключение FlipClock

Если вам нравится Bower, то введите в консоли:

bower install FlipClock

Если у вас только Node (NPM), то введите в консоли:

npm install flipclock

Таймер FlipClock требует JQuery для DOM манипуляций и работает типичный плагин JQuery, но вместо объекта JQuery возвращает объект FlipClock. После подключения JQuery библиотеки, нужно подключить файл со стилями flipclock.css ну и соответственно сам плагин flipclock.min.js.

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

После этого, вам нужно будет инициализировать сам плагин:

var clock = $('.your-clock').FlipClock({
// ... набор параметров
});

var clock = new FlipClock($('.your-clock'), {
// ... набор параметров
});

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

Настройки

autoStart (boolean)

При установке этого параметра как false, часы не будут автоматически запускаться. Значение по умолчанию - true.
countdown (boolean)

Используйте значение true, чтобы таймер начал обратный отсчет. Значение по умолчанию - false.
callbacks (объект)

Функции обратного вызова, вызываемые в различные моменты времени. Для более подробной информации, изучите документацию по функциям обратного вызова.
classes (объект)

Объект классов CSS для добавления к объектам DOM
clockFace (строка)

Название, которое используется для отображения часов. Значение по умолчанию - HourlyCounter.
defaultClockFace (строка)

Задает внешний вид часов, используемый по умолчанию, если нет циферблата. Дефолтное значение - HourlyCounter.
defaultLanguage (строка)

Установка языка по умолчанию. Дефолтное значение - english.

Методы

Все эти методы принадлежат к классу FlipClock.Factory.

start()

Запускает часы. Вызовите метод .start() на объекте FlipClock:

clock.start(function() {
// Действие срабатывает при старте часов
});

stop()

Останавливает часы. Вызовите метод .stop() на объекте FlipClock:

clock.stop(function() {
// Действие срабатывает при остановке часов
});

setTime()

Этот метод установки времени часов после того, как был создан экземпляр. Просто вызовите метод .setTime() на объекте FlipClock.
```
clock.setTime(3600); //Установка времени на 1 час
```
setCountdown()

Этот метот заставляет идти часы как вперед (false) так и назад (true).
```
clock.setCountdown(true);
```
getTime()

Чтобы получить время на часах после их установки вызовите метод .getTime() на объекте FlipClock.
```
// Возвращает FlipClock.Time объект
var time  = clock.getTime();
```

Функции обратного вызова

destroy

Этот обратный вызов инициируется, когда таймер уничтожен
create

Этот обратный вызов инициируется, когда циферблат создан
init

Этот обратный вызов вызывается, когда объект FlipClock инициализован
interval

Этот обратный вызов инициируется с каждым интервалом таймера
start

Этот обратный вызов инициируется, когда часы начинают тикать
stop

Этот обратный вызов инициируется, когда часы остановлены
reset

Этот обратный вызов инициируется, когда таймер сбрасывается

Пример работы таймера обратного отсчета

$(function() {
var clock;
clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter', //Вид счетчика 
                               //(с количеством дней)
    autoStart: false, //Отключаем автозапуск
    countdown: true,  //Устанавливаем обратный отсчет
    language:'ru-ru', //Локаль языка (русский)
    callbacks: {
      stop: function() { //После окончания 
                         //отсчета выполнить:
        $('.clock-stop').addClass("alert alert-danger");
        $('.clock-stop').html('Время вышло!');
      }
    }
});
  
    clock.setTime(20); //Требуемое время в секундах
    clock.setCountdown(true); //Отсчет назад
    clock.start(); //Запускаем отсчет
});

Результат примера (когда отсчет окончился) показан на рисунке ниже: