Як зробити лічильник зворотного відліку на jquery.

Відео: Уроки jаvascript | Урок №15 - Таймери

Якщо ваш сайт знаходиться на реконструкції, або, якщо ви скоро випускаєте якийсь продукт, то буває дуже зручно вивести лічильник зворотного відліку, щоб люди могли відразу побачити, скільки часу залишилося до початку. Разом з JQuery і плагіном ClassyCountdown це дуже просто зробити, і сьогодні ми поговоримо, як.

Для початку перейдіть на офіційний сайт і скачайте плагін, натиснувши кнопку Download it.

Тепер підключіть бібліотеку JQuery

А далі всі необхідні файли для плагіна і сам плагін

 
 
 
rel="Stylesheet"type="Text / css"href="Css / jquery.classycountdown.min.css"/ Gt;

Створіть блок там, де ви хочете вивести лічильник.

Відео: Таймер зворотного відліку для сайту

class="Countdown"gt;

І запустіть плагін

$(`.countdown`).ClassyCountdown({ 
 theme:"Flat-colors", 
end: $.now()+10000 
}) -

Як бачите, все дуже просто. На офіційному сайті ви можете побачити багато різних відображень лічильника і вибрати той, що вам сподобався.

Ви можете передавати такі параметри в плагін:

theme - тема лічильника
end - час закінчення
now - поточний час
labels - следут чи відображати дні / години / хвилини / секунди
style - призначений для користувача стиль для лічильника
labelsOptions - об`єкт, який визначає різні мовні фрази для д / ч / м / с, а також конкретні стилі css