В предыдущей статье про счетчик обратного отсчета для 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 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Counter</title> <link type="text/css" rel="stylesheet" href="timeTo.css"/> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="jquery.time-to.min.js"></script> </body> </html> |
Теперь надо создать пустой контейнер для счетчика обратного отсчета и добавить его в тело страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Counter</title> <link type="text/css" rel="stylesheet" href="timeTo.css"/> </head> <body> <div id="counter"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="jquery.time-to.min.js"></script> </body> </html> |
Автор плагина приводит много примеров использования данного счетчика обратного отсчета. Я вам предложу один, наиболее полезный в нашем случае — когда мы выбираем дату и время финиша нашего счетчика.
Я предлагаю считать до 1 января 2017 года — проще говоря, до Нового 2017 года. Для этого просто добавим еще пару строк кода в нашу страницу после подключения скриптов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Counter</title> <link type="text/css" rel="stylesheet" href="timeTo.css"/> </head> <body> <div id="counter"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="jquery.time-to.min.js"></script> <script> $('#counter').timeTo(new Date('Jan 01 2017 00:00:00 GMT+0200 (EET)')); </script> </body> </html> |
Стоит ли объяснять, что мы делаем с нашим элементом #counter ?
Единственное, что следует знать — это правильные названия всех 12 месяцев, которые понимает этот чудесный плагин обратного отсчета.
Также рекомендую ознакомиться с документацией по данному плагину. Ссылка на официальную страницу была вначале статьи.