Если ваш сайт находится на реконструкции, либо, если вы скоро выпускаете какой-то продукт, то бывает очень удобно вывести счетчик обратного отсчета , чтобы люди могли сразу увидеть, сколько времени осталось до начала. Вместе с JQuery и плагином ClassyCountdown это очень просто сделать, и сегодня мы поговорим, как.
Если ваш сайт находится на реконструкции, либо, если вы скоро выпускаете какой-то продукт, то бывает очень удобно вывести счетчик обратного отсчета, чтобы люди могли сразу увидеть, сколько времени осталось до начала. Вместе с JQuery и плагином ClassyCountdown это очень просто сделать, и сегодня мы поговорим, как.
Для начала перейдите на официальный сайт и скачайте плагин, нажав кнопку Download it.
Теперь подключите библиотеку JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
А дальше все необходимые файлы для плагина и сам плагин
<script src="js/jquery.classycountdown.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.throttle.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycountdown.min.css" />
Создайте блок там, где вы хотите вывести счетчик.
<div class="countdown"></div>
И запустите плагин
$('.countdown').ClassyCountdown({
theme: "flat-colors",
end: $.now() + 10000
});
Как видите, все очень просто. На официальном сайте вы можете увидеть много разных отображений счетчика и выбрать тот, что вам понравился.
Вы можете передавать следующие параметры в плагин:
- theme - тема счетчика
- end - время окончания
- now - текущее время
- labels - следуте ли отображать дни/часы/минуты/секунды
- style - пользовательский стиль для счетчика
- labelsOptions - объект, который определяет различные языковые фразы для д/ч/м/с, а также конкретные стили css
У плагина также есть метод onEndCallback(), который сработает тогда, когда счетчик закончит отсчет. К примеру, можно отсылать письма подписчикам.
Думаю, каждый найдет применение этому плагину на своем сайте. Спасибо за внимание!
