Уважаемые друзья, форма вопрос - ответ снова в строю!

Установка таймер обратного отсчета 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 (boolean)

Если этот параметр установлен на false, часы не будут автоматически запускаться. Значение по умолчанию true.

countdown (boolean)

Если этот параметр установлен на true, то часы начнут отсчет обратно. Значение по умолчанию false.

callbacks (object)

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

classes (object)

Это объект классов CSS используется для добавления к объектам DOM.

clockFace (string)

Это название часов, которые используются для построения отображения часов. Значение по умолчанию HourlyCounter.

defaultClockFace (string)

Это внешний вид часов, используемый по умолчанию, если циферблата не существует. Значение по умолчанию HourlyCounter.

defaultLanguage (string)

Установки языка. По умолчанию 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г.
по вашему коду, все работает отлично, но он не останавливается при окончания времени, а начинает считать в "минуса, так же не срабатывает онСтоп

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


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

- Администрация     - 19:26:48 20/04/2017г.

fetfurmoz
18:43:41 20/11/2016г.
Спс. за ответ, если вас не затруднит не могли бы сбросить готовый вариант, как описали ? на fetfurmoz@yandex.ua

<script>
$(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(); //Запускаем отсчет
});

</script>

- Администрация     - 08:29:08 21/11/2016г.

fetfurmoz
16:20:19 20/11/2016г.
Здравствуйте, а как его зациклить + при обновлении что бы продолжал считать + время показывалось каждому зашедшему оставшееся до 24.00 ? )  по силам такая задача ? )

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

- Администрация     - 18:33:01 20/11/2016г.

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

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

- Администрация     - 15:49:24 10/06/2016г.

  • 1

Получить уведомление на Email

Введите код с картинки