Счетчики обратного отсчета для сайтов на JSСчетчики весьма популярны на сайтах, их часто применяют для того, чтобы проинформировать посетителя о грядущем событии и сколько еще осталось до его начала. Но зачастую начинающие дизайнеры не знаю как правильно реализовать такую полезную функцию или стилизовать ее под свой сайт. В данном уроке мы хотим привести пример различных счетчиков с различным исполнением и стилями, благодаря которым вы найдете наиболее подходящий для себя. Для этого нам понадобится небольшой плагин jQuery. И так, давайте посмотрим.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Мы будем использовать плагин ClassyCountdown — это jQuery плагин для быстрого создания счётчиков обратного отсчёта. Для отображения циферблата используется HTML5 canvas. В вашем распоряжении 12 различных тем на любой вкус.

Настройка

Сперва необходимо подключить jQuery:

Затем нужно подключить плагин jQuery ClassyPaypal, CSS файл и библиотеки от которых он зависит (jQuery knob и jQuery throttle):

После этого необходимо создать HTML блок, к которому будем применять плагин.

Последний шаг — инициализация плагина. Применяем его, к только что созданному блоку.

Методы

onEndCallback() — функция обратного действия, которая запускается после окончания обратного отсчёта.

Счетчики обратного отсчета для сайтов на JS 2

Параметры

theme — тема счётчика. Может принимать значения: flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide или white-black.

labels — отображать текст days/hours/minutes/seconds или нет.

style — свои стили для счётчика.

labelsOptions — объект, где можно перечислить текст лэйблов для других языков. Например:

Вот и все. Готово!