Счетчик обратного отсчета v.2

В предыдущей статье про счетчик обратного отсчета для landing page все выглядело слегка туманно. Основной проблемой был сброс и отсчет заново при каждом обновлении страницы. Некоторые даже ругались, что этот счетчик обманывает клиентов.

В данной статье предлагаю вам другой скрипт счетчика обратного отсчета для ваших лендингов и не только ))

Документация по скрипту находится тут: https://github.com/Lexxus/jq-timeTo. Для его работы понадобится наша любимая библиотека jQuery. Где ее скачать — все уже знают.

Нам понадобятся два файла: сам скрипт и дефолтные стили.
Стили тут: https://raw.githubusercontent.com/Lexxus/jq-timeTo/master/timeTo.css.
Скрипт счетчика тут: https://raw.githubusercontent.com/Lexxus/jq-timeTo/master/jquery.time-to.min.js.

В head вашей страницы подключаем файл со стилями, а перед закрывающимся тегом </body> подключаем сначала библиотеку jQuery, а потом сам плагин. В моем примере стилевой файл, скрипт и сама страница находятся в одном каталоге.

Теперь надо создать пустой контейнер для счетчика обратного отсчета и добавить его в тело страницы:

Автор плагина приводит много примеров использования данного счетчика обратного отсчета. Я вам предложу один, наиболее полезный в нашем случае — когда мы выбираем дату и время финиша нашего счетчика.

Я предлагаю считать до 1 января 2017 года — проще говоря, до Нового 2017 года. Для этого просто добавим еще пару строк кода в нашу страницу после подключения скриптов:

Стоит ли объяснять, что мы делаем с нашим элементом #counter ?

Единственное, что следует знать — это правильные названия всех 12 месяцев, которые понимает этот чудесный плагин обратного отсчета.

Также рекомендую ознакомиться с документацией по данному плагину. Ссылка на официальную страницу была вначале статьи.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *