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

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


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

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

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

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

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

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

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

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

Структура flipclock

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

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

Код в index.html.

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

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

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

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

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

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

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

  1. для запуска часов укажем в секундах clock.setTime (3000).
  2. для обратного отсчета время укажем clock.setCountdown (true).
  3. clock.start () для запуска таймер.

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

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

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

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

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

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

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

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

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

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

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

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

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

Код в common.js.

Комментариев нет