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


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

  • ...
    Алексей 01:39:45 27/11/2017
    При вставке clock.setTime(time) - независимо от того, есть callbacks: {stop: function() {... или же нет, после того как таймер доходит до 0 - он продолжает отсчитывать в минус. Если же брать конструкцию отсчёта дней до Нового года из исходников, всё работает, но она слишком непонятная. Непонятная по-части установки произвольного времени для обратного отсчёта. Как поправить конструкцию, которую предложили вы, чтобы счётчик не отсчитывал в минус? 
  • Администрация
    Администрация 21:04:43 12/12/2017

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

  • ...
    Niki 11:37:37 20/04/2017
    по вашему коду, все работает отлично, но он не останавливается при окончания времени, а начинает считать в "минуса, так же не срабатывает онСтоп
  • Администрация
    Администрация 19:26:48 20/04/2017

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

    	//Действие после окончания отсчета
    	callbacks: { 
    	    stop: function() {
    			$('.clock-stop').addClass("alert alert-danger");
    			$('.clock-stop').html('Время вышло!');
           	}
        }
    
  • ...
    fetfurmoz 18:43:41 20/11/2016
    Спс. за ответ, если вас не затруднит не могли бы сбросить готовый вариант, как описали ? на fetfurmoz@yandex.ua
  • Администрация
    Администрация 08:29:08 21/11/2016
    
    	$(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(); //Запускаем отсчет
    });
    
    
  • ...
    fetfurmoz 16:20:19 20/11/2016
    Здравствуйте, а как его зациклить + при обновлении что бы продолжал считать + время показывалось каждому зашедшему оставшееся до 24.00 ? )  по силам такая задача ? )
  • Администрация
    Администрация 18:33:01 20/11/2016

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

  • ...
    ip.ip 11:04:55 10/06/2016
    Спасибо, отличная статья, вот только не могу разобраться как убрать секунды
  • Администрация
    Администрация 15:49:24 10/06/2016

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

Форма обратной связи
captcha