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

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

Установка таймер обратного отсчета 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(); //Запускаем отсчет
});

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

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

27/11/2017 01:39:45

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

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

12/12/2017 21:04:43

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

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

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

20/11/2016 16:20:19

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

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

20/11/2016 18:33:01

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

10/06/2016 11:04:55

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

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

10/06/2016 15:49:24


Copyright © 2014 - 2024 All rights reserved.