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

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

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

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

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

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

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

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

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