Уроки Таймер обратного отсчета countdown360
5 июля 2017
610
таймер обратного отсчета, countdown360, таймер секунд для сайта

Таймер обратного отсчета countdown360

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Всем доброго и приятного вечера после тяжелой работы или просто приятного выходного дня, для тех, кто в отпуске и читает данную статью! Накануне я долго думал, какой материал выпустить быстрее про API VK или про CSS 3, но тут мне пришлось для одного сайта, который на данный момент находится в разработке, искать подходящий таймер обратного отсчета, причем нужен был сам скрипт, а не виджет какой-то с параллельного ресурса, и вот приглянулся один таймер, который и будет рассмотрен в сегодняшнем нашем материале.

 

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

 

Первый шаг. HMTL

 

Давайте приступим к первому шагу, а именно к подключению наших скриптов, ведь стилизация тут самого таймера обратного отсчета задается с помощью параметров в коде плагина. Для начала подключаем библиотеку jquery.min.js, затем наш плагин jquery.countdown360.min.js и инициализатор запуска и параметров плагина timer.js. Для данного урока я приложил сжатую версию самого плагина, кому потребуется полная, можете перейти по ссылке в источниках материала.

В самом коде HTML нам нужно только вывести сам таймер и сделаем мы это с помощью идентификатора countdown в div-блоке.

 

<div id="countdown"></div>

 

Второй шаг. JQUERY

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

 

var countdown =  $("#countdown").countdown360({
    radius: 140,
    seconds: 45,
    fontColor: '#FFFFFF',
	strokeStyle: "#161C21",
	fillStyle: "#E2BF03", 
    onComplete: function () {}
});
countdown.start();

 

А теперь, давайте его разберем. Первым делом видим, что мы прописали функцию countdown360, которая обращается к нашему идентификатору countdown и после чего с помощью функции countdown.start(); мы инициализируем наш плагин, то есть, запускаем его.

 

В нашей функций countdown360 имеются определенные параметры, каждый из которых отвечает за работу нашего таймера.

 

Параметр Значение Описание
radius 140 Задается радиус
seconds 45 Задается время в секундах
fontColor #FFFFFF Задается цвет шрифта
strokeStyle #161C21 Задается фон
fillStyle #E2BF03 Задается фон радиуса

 

С другими параметрами, Вы можете ознакомиться, опять же по ссылке в исходниках материала, которые Вам конкретно потребуется для любого случая. Если же данный таймер обратного отсчета оказался не тот, который Вам нужен, можете к примеру еще посмотреть тему онлайн таймер MegaTimer, тоже вроде не плохой таймер, но это будет виджет, а не плагин, поэтому решать Вам, что нужнее.

 

А я с Вами прощаюсь, подписывайтесь на нас на YouTube, чтобы не пропустить следующий урок по API VK! Всем удачи и до скорого!)





Роман КраутерИсточник материала »