От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Говоря о ТОПе плагинов, невозможно обойти стороной плагины, позволяющие реализовать для сайта таймер обратного отсчета. Давайте познакомимся с таким плагином jQuery таймер обратного отсчета.
Таймер обратного отсчета — штука практически незаменимая на продающих сайтах. На таких сайтах часто организовываются всевозможные акции, привязанные к временной отметке. В течение определенного времени можно приобрести товар со скидкой. Или же через некоторое время начнется старт продаж. Для всего этого требуется таймер, который будет производить обратный отсчет.
Подобных плагинов достаточно много, мы остановим сегодня свой выбор на вот этом плагине jQuery таймер обратного отсчета. Он достаточно прост в использовании и прекрасно справляется с поставленной задачей. Скачиваем и подключаем необходимые файлы.
1 2 3 4 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.4/moment-timezone-with-data.js"></script> <script src="js/timer.js"></script> |
Далее нам потребуется определенная разметка для работы jQuery таймера обратного отсчета, выглядит она примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="clock"> <div class="column days"> <div class="timer" id="days"></div> <div class="text">DAYS</div> </div> <div class="timer days">:</div> <div class="column"> <div class="timer" id="hours"></div> <div class="text">HOURS</div> </div> <div class="timer">:</div> <div class="column"> <div class="timer" id="minutes"></div> <div class="text">MINUTES</div> </div> <div class="timer">:</div> <div class="column"> <div class="timer" id="seconds"></div> <div class="text">SECONDS</div> </div> </div> |
Как видим, здесь все достаточно очевидно. Есть дни, часы, минуты и секунды. Каждая из частей помещена в свой блок, который мы можем оформить по своему желанию. Если сейчас запустить скрипт, то мы можем увидеть примерно такую картину:
Все правильно, jQuery таймер ведь неоформлен. Оформление вы можете составить сами, под дизайн вашего сайта… ну или же взять файл стилей из исходников таймера.
1 |
<link rel="stylesheet" href="css/style.css"> |
Совсем другая картина 🙂
Ну и, само собой, конфигурация плагина jQuery таймер обратного отсчета. Конфигурация производится в файле timer.js, который мы подключали выше. В нем есть объект config, где мы и можем указать конечную дату. Здесь нам интересны свойства endDate, timeZone и newSubMessage. В свойстве endDate записываем конечную дату. Свойство timeZone отвечает за часовой пояс, который будет использовать таймер в работе. Ну и свойство newSubMessage отвечает за текст, который появится вместо таймера, когда отсчет закончится. Для того, чтобы текст появился, на странице необходимо создать соответствующий пустой элемент:
1 |
<span class="sub-message"></span> |
Пример конфигурации таймера обратного отсчета:
1 2 3 4 5 6 7 8 |
var config = { endDate: '2017-03-01 12:00', // 12 часов 1 марта 2017 года timeZone: 'Europe/Kiev', // Киевское время hours: $('#hours'), minutes: $('#minutes'), seconds: $('#seconds'), newSubMessage: 'and should be back online in a few minutes...' }; |
На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
Комментарии (2)