Установка таймер обратного отсчета FlipClock на сайт

Привет друзья. Хочу поделится с Вами замечательным плагином отсчета времени на сайте. Данный плагин не использует графический элементов, вся красота написана на CSS по этому он легко изменяется под ваш дизайн. Как вы уже догадались имя этого плагина FlipClock.

И так, как и любой плагин написанный на JQuery для своей работы он требует установку самой библиотеки JQuery на вашем сайте. После подключения JQuery библиотеки, нужно подключить файл со стилями flipclock.css ну и соответственно сам плагин flipclock.min.js.

Установка плагина FlipClock на сайт


<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>

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

Создаем экземпляр класса с нужными опциями


var clock = $('.your-clock').FlipClock({
// ... здесь ваши опции
});


var clock = new FlipClock($('.your-clock'), {
// ... здесь ваши опции
});

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

Опции
autoStart Type: `(boolean)` Default: `true`	Если этот параметр установлен на false, часы не будут автоматически запускаться. Значение по умолчанию true.
countdown Type: `(boolean)` Default: `false`	Если этот параметр установлен на true, то часы начнут отсчет обратно. Значение по умолчанию false.
callbacks Type: `(object)`	Объекты функции обратного вызова, которые вызываются в различные моменты времени. Для получения более подробной информации, просмотрите документацию обратного вызова.
classes Type: `(object)`	Это объект классов CSS используется для добавления к объектам DOM.
clockFace Type: `(string)` Default: `HourlyCounter`	Это название часов, которые используются для построения отображения часов. Значение по умолчанию HourlyCounter.
defaultClockFace Type: `(string)` Default: `HourlyCounter`	Это внешний вид часов, используемый по умолчанию, если циферблата не существует. Значение по умолчанию HourlyCounter.
defaultLanguage Type: `(string)` Default: `English`	Установки языка. По умолчанию English

Методы
Следующие методы принадлежат к классу FlipClock.Factory.

start()

Это метод запуска часов просто вызываете метод .start() на объекте FlipClock.


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

stop()

Это метод остановки часов просто вызываете метод .stop() на объекте FlipClock.


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

setTime()

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


clock.setTime(3600); //Установка времени на 1 час

setCountdown()

Этот метот заставляет работать часы как вперед так и назад.


clock.setCountdown(true);

getTime()

Чтобы получить время на часах после его установки просто вызовите метод .getTime() на объекте FlipClock.


var time  = clock.getTime(); // Returns the FlipClock.Time object

Мои настройки таймера отсчета на данной странице


$(document).ready(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(15); //Устанавливаем нужное время в секундах
    clock.setCountdown(true); //Устанавливаем отсчет назад
    clock.start(); //Запускаем отсчет
});

Теги

#Jquery #Plugins #HTML

Поддержи проект:

Алексей

При вставке clock.setTime(time) - независимо от того, есть callbacks: {stop: function() {... или же нет, после того как таймер доходит до 0 - он продолжает отсчитывать в минус. Если же брать конструкцию отсчёта дней до Нового года из исходников, всё работает, но она слишком непонятная. Непонятная по-части установки произвольного времени для обратного отсчёта. Как поправить конструкцию, которую предложили вы, чтобы счётчик не отсчитывал в минус?

27/11/2017 01:39:45

Администрация

Алексей все должно работать, скорей всего вы не учли регистр переменных в плагине, посмотрите еще раз документацию или скопируйте мой пример и подставьте свое время для отсчета.

12/12/2017 21:04:43

Niki

по вашему коду, все работает отлично, но он не останавливается при окончания времени, а начинает считать в "минуса, так же не срабатывает онСтоп

20/04/2017 11:37:37

Администрация

Для остановки нужно использовать функцию обратного вызова callback

	//Действие после окончания отсчета
	callbacks: { 
	    stop: function() {
			$('.clock-stop').addClass("alert alert-danger");
			$('.clock-stop').html('Время вышло!');
       	}
    }

20/04/2017 19:26:48

fetfurmoz

Спс. за ответ, если вас не затруднит не могли бы сбросить готовый вариант, как описали ? на fetfurmoz@yandex.ua

20/11/2016 18:43:41

Администрация


	$(document).ready(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('Время вышло!');
       	}
       }
    });
  
		var target = "2016-11-22T00:00:00"; //Дата до которой нужен таймер
		var targetDate = new Date(target); //Переводим в мил. секунды
		var nowDate = Date.now(); //Текущая дата и время в мил. секундах
		var time = (targetDate - nowDate) / 1000; //Получаем секунды
		
    clock.setTime(time); //Устанавливаем нужное время в секундах
    clock.setCountdown(true); //Устанавливаем отсчет назад
    clock.start(); //Запускаем отсчет
});

21/11/2016 08:29:08

fetfurmoz

Здравствуйте, а как его зациклить + при обновлении что бы продолжал считать + время показывалось каждому зашедшему оставшееся до 24.00 ? ) по силам такая задача ? )

20/11/2016 16:20:19

Администрация

Да можно, нужно высчитать количество секунд на стороне клиента использую JS. Определите текущую дату и дату до которой нужен отсчет, переведите полученные данные в секунды и подсуньте методу clock.setTime(EndDate); Тем самым отсчет не будет сбрасываться при перезагрузке страницы, а будет продолжаться отсчет в реальном времени.

20/11/2016 18:33:01

ip.ip

Спасибо, отличная статья, вот только не могу разобраться как убрать секунды

10/06/2016 11:04:55

Администрация

Нужно добавить еще одну опцию в настройках плагина для отключения секунд showSeconds:false

10/06/2016 15:49:24