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'), {
// ... набор параметров
});
Оба приведенных выше примера равнозначны, используйте тот, который вам больше нравится.
Настройки
Методы
Все эти методы принадлежат к классу FlipClock.Factory.
Функции обратного вызова
Пример работы таймера обратного отсчета
$(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(); //Запускаем отсчет
});
Результат примера (когда отсчет окончился) показан на рисунке ниже: