flipclock таймер часто используют на лендингах, продающих страницах, на страницах ожидания.
Этот один из симпатичных плагинов таймера.
Этот таймер не использует картинок, сделан только на css стилях.
Означит, что можно менять цифры, размеры у таймер flipclock и оформлять в своем стиле.
Откроем index.html у чистого шаблона gulp sass.
- скачаем flipclock средствами bower.
- либо с официального сайта.
- подключим flipclock.css в libs.sass.
- и файл flipclock.min.js в gulpfile.js.
Содержание статьи
Структура flipclock
Добавим див с классом your-clock, в который будут загружаться часы и див с классом message, в котором будут сообщения.
Если таймер обратного отсчета покажет ноль секунд, то появится сообщение, что время истекло.
Код в index.html.
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 () для запуска таймер.
Сохраняем и проверим отображение в браузере
Обратный отсчет при обновлении страницы
Чтобы при обновлении в браузере не сбрасывался счетчик таймера, а продолжал идти обратный отсчет.
Добавим переменную time и в стандартном формате укажем время, когда закончится акция.
Дальше зададим переменную время var first и в нее вставим time, получим дату.
Зададим переменную last, в которой получим текущую дату.
Высчитаем разницу межу переменной времени first и last, получим результат result.
В расчетах получим миллисекунды, нам нужны секунды, для этого используем деление result /=1000 получим секунды до даты.
В заключение переменную result вставим в clock.setTime ().
Посмотрим, что получилось в браузере.
Увидим, что до первого сентября осталось двенадцать дней.
Код в common.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(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(); }); |