Счетчики обратного отсчета для сайтов на 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 - объект, где можно перечислить текст лэйблов для других языков. Например:

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

Читайте также: