20 Август 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

flipclock красивый таймер обратного отсчета для акций на сайте

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

Этот один из симпатичных плагинов таймера.

Этот таймер не использует картинок, сделан только на css стилях.

Означит, что можно менять цифры, размеры у таймер flipclock и оформлять в своем стиле.

Откроем index.html у чистого шаблона gulp sass.

скачаем flipclock средствами bower.
либо с официального сайта.
подключим flipclock.css в libs.sass.
и файл flipclock.min.js в gulpfile.js.

скачаем flipclock средствами bowe

Содержание статьи

1 Структура flipclock

Структура flipclock

Добавим див с классом your-clock, в который будут загружаться часы и див с классом message, в котором будут сообщения.

Если таймер обратного отсчета покажет ноль секунд, то появится сообщение, что время истекло.

Код в index.html.

<div class="your-clock"></div>
<div class="message"></div>

1 2	<div class="your-clock"></div> <div class="message"></div>

Настройка common.js

Зададим переменную clock, присвоим ей наш див с классом your-clock и в нее напишем функцию FlipClock с параметрами в фигурных скобках.

Первый параметр будет clockFace : DailyCounter, этот параметр означает, что отсчет будет начинаться с дней.

Сколько осталось дней до конца акции, например.

Дальше идет autoStart : false.

В callbacks напишем функцию выведения сообщения, когда будет остановлен счет, кончится время.

Выведем в класс message сообщение html, что время истекло.

для запуска часов укажем в секундах clock.setTime (3000).

для обратного отсчета время укажем clock.setCountdown (true).

clock.start () для запуска таймер.

Сохраняем и проверим отображение в браузере

проверим отображение в браузере flipclock

Обратный отсчет при обновлении страницы

Чтобы при обновлении в браузере не сбрасывался счетчик таймера, а продолжал идти обратный отсчет.

Добавим переменную time и в стандартном формате укажем время, когда закончится акция.

Дальше зададим переменную время var first и в нее вставим time, получим дату.

Зададим переменную last, в которой получим текущую дату.

Высчитаем разницу межу переменной времени first и last, получим результат result.

В расчетах получим миллисекунды, нам нужны секунды, для этого используем деление result /=1000 получим секунды до даты.

В заключение переменную result вставим в clock.setTime ().

Посмотрим, что получилось в браузере.

Увидим, что до первого сентября осталось двенадцать дней.

Посмотрим, что получилось в браузере flipclock

Код в common.js.

$(function() {
	var clock = $('.your-clock').FlipClock({
		clockFace : "DailyCounter",
		autoStart : false,
		callbacks :{
			stop : function() {
				$(".message").html("время истекло");
			}
		}
	});
	var time = "September 01 2017 12:00:00";
	var first = new Date(time);
	var second = Date.now();
	var result = first - second;
	result /=1000;
	clock.setTime(result);
	clock.setCountdown(true);
	clock.start();
});

$(function() {

var clock = $('.your-clock').FlipClock({

clockFace : "DailyCounter",

autoStart : false,

callbacks :{

stop : function() {

$(".message").html("время истекло");

}

});

var time = "September 01 2017 12:00:00";

var first = new Date(time);

var second = Date.now();

var result = first - second;

result /=1000;

clock.setTime(result);

clock.setCountdown(true);

clock.start();

});