Таймер обратного отсчета с оформлением на jQuery

На сайтах одностроничниках часто можно увидеть красивые информеры, которые отсчитывают время до конца скидочной акции, времени действия купона или предложения. 90% таких сайтов используют плагин jquery.countdown.js, рассмотрим его подробнее.

Обычно, данный таймер позволяет легко организовать отсчет времени в 2 режимах.

1. Счет времени идет от текущей даты до той, что указана в настройках. Если время указанной даты станет меньше, чем текущая, то включится 2 режим.
2. Счет времени идет в том интервале, который указал веб-мастер (без привязки к датам).

В скачанном примере откройте index.html, в нем вы увидите все файлы, которые подключаются для работы таймера и код, который их запускает.

Сейчас таймер отображает время на элементе с id="countdown". Но вы можете легко поменять его на другой идентификатор. Так как я переделал стандартный код вызова скрипта в виде функции blocktimer(), то вы можете запускать бесконечно много таких таймеров на одной странице, меняя только их идентификаторы.

Рассмотрим запуск таймера в 1 режиме:

blocktimer('#countdown', '2016, 11, 24', 2*24*60*60*1000);

Считает до 2016.12.24. Когда наступит это число будет считать 2*24*60*60*1000 (2-е суток). Заметьте, что счет месяцев в функции идет с 0 по 11. Т.е. 0 - это январь, а 11 - декабрь.

Запуск таймера во втором режиме:

blocktimer('#countdown', '2014, 7, 1', 7*24*60*60*1000); 

Здесь мы ставим дату меньшую, чем сегодняшнюю и выставляем время счета в 8 дней. Когда бы мы не включили страницу, всегда будет идти отсчет в 8 дней.

Внешний вид таймера я постарался сделать максимально красивым, но вы можете его легко переделать под стилистику своего сайта.