Приветствую всех, кто в данный момент читает эту публикацию. Сегодня я хочу научить вас создавать таймер обратного отсчета jQuery. Это одна из интересных и наиболее популярных технологий, которая часто применяется в интернет-магазинах и сервисах, специализирующихся на продажах акционных купонов или продукции со скидками.
Такой способ посетителей сайта уведомляют об оставшемся времени действия того или иного выгодного предложения. Поэтому после прочтения данной статьи вы научитесь создавать несколько видов таймеров, а также познакомитесь с некоторыми удобными плагинами. Поехали!
3,2,1…Стоооп!!
Начнем с привычного внешнего вида таймера обратного отсчета. В центре веб-страницы я решил расположить счетчик времени, который оповещает об окончании некой акции. Я реализовал простой вариант, так сказать стартовый. Вы можете разобрать прикрепленный мною код и дальше его совершенствовать.
Начнем с html-заметки. Код «каркаса» будущей странички совсем коротенький и выглядит вот так:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таймер обратного отсчета</title>
</head>
<body>
<h1>Акция закончится через:</h1>
<div id="res"></div>
</body>
</html> |
Теперь перейдем к таблицам стилей. В css я задал внешний вид контейнеру body, после уделил внимание заголовку и конечно же самому таймеру. В стилевых правилах вы найдете такой класс, как .num. Именно его мы создадим в скрипте для вывода полученной даты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style>
body {
background: #FFC0CB;
text-align:center;
}
h1 {
color: #FF0101;
text-decoration: underline;
}
#res{
color: #fffeef;
display: block;
font-size: 59px;
}
#res > .num{ /*выше упомянутый класс*/
width: 95px;
height: 67px;
border-radius: 13px;
margin: 13px;
box-shadow: 1px 1px #FFC0CB, 3px 3px #FF0101;
background: #00dFb6;
display: inline-block;
}
</style> |
А теперь переходим к самому интересному – скрипту, который реализует таймер.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function countdown(){
var today = new Date().getTime();
var end = new Date(2016,09,01).getTime(); /*Здесь нужно указать дату окончания*/
var dateX = new Date(end-today); /*узнаем сколько времени осталось до дня «Икс»*/
var toDays = 60*60*1000*24;
info_to_write = '<div class="num">' + (Math.round(dateX/toDays) +
'</div><div class="num">' + dateX.getUTCHours().toString() +
'</div><div class="num">' + dateX.getMinutes().toString() +
'</div><div class="num">' + dateX.getSeconds().toString() + '</div>');
var result = document.getElementById('res'); /*находим нужный элемент с указанным id*/
result.innerHTML = info_to_write; /*присваиваем ему сгенерированный код*/
}
countdown();
setInterval(countdown, 1000); |
Хочу напомнить, что если у вас нет специальных программ для запуска данного приложения, а уж очень хочется самим попробовать повторить код и запустить его, то интернет вам в помощь!
На сегодняшний день существуют замечательные онлайн-редакторы для быстрого написания и проверки программного кода. Я советую вам опробовать мою программу на сайте http://codepen.io/pen/. После знакомства с данным сервисом вы поймете почему мой выбор пал именно на него.
Кручу-верчу, обнулить хочу!
Теперь я хочу познакомить вас с круговыми таймерами. Они достаточно необычно выглядят, что и привлекает внимание пользователей.
Но помимо необычного счетчика, я решил также научить вас пользоваться очень удобным плагином, который называется TimeCircles.
Благодаря встроенным 11 опциям, его можно видоизменять под свои нужды. Вдобавок к этому, он очень прост в управлении. Если у вас появилось желание детально ознакомиться со всеми особенностями данной технологии, то вот ссылка на официальный ресурс: http://git.wimbarelds.nl/TimeCircles/index.html.
А теперь переходим к самому увлекательному! Как и в прошлый раз начнем со «скелета» веб-приложения. Разметка на языке html выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Дата окончания действия купона: 2016-09-03</h1>
<div id="CountdownDate" data-date="2016-09-03 00:00:00"></div>
/*Здесь будет обрабатываться плагин*/
</body>
</html> |
Теперь я предлагаю подключить нужные скрипты. Для этого внутри тега <head> вставьте вот эти строки:
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="TimeCircles.js"></script> |
Внимание! Для того чтобы подключаемый плагин заработал, нужно выполнить несколько действий:
- Скачать его по ссылке, прикрепленной выше;
- Файлы «TimeCircles.js» и «TimeCircles.css» поместить в один каталог с вашим сайтом (файлом с расширением .html);
- Прописать выше представленные скрипты.
Базовые действия выполнены, настало время подключать стили. Сразу же под последними вставленными строками допишите:
1 2 3 4 5 6 7 8 9 10 11 12 | <link rel="stylesheet" href="TimeCircles.css" />
<style>
body {
background: #FFA07A;
text-align:center;
}
h1 {
color: #FFeeff;
text-shadow: 5px 3px 6px #010;
font-size: 34px;
}
</style> |
И теперь вместо комментария осталось вставить функцию, которая и будет реализовывать таймер обратного отсчета.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script>
$("#CountdownDate").TimeCircles({
"animation": "smooth",
"fg_width": 0.03,
"bg_width": 0.6,
"circle_bg_color": "#60686F",
"time": {
"Days": {
"text": "Days",
"color": "#ff8f66",
"show": true
},
"Hours": {
"text": "Hours",
"color": "#ffe699",
"show": true
},
"Minutes": {
"text": "Minutes",
"color": "#bbfff9",
"show": true
},
"Seconds": {
"text": "Seconds",
"color": "#a3ff99",
"show": true
}
}
});
</script> |
Я решил, что будет целесообразным показать вам все возможности TimeCircles. Поэтому поменял большинство стандартных настроек внешнего вида панели. Если же этого не делать, то вызов плагина сократиться до одной строки:
$(«#CountdownDate»).TimeCircles ();
Кстати, прошлый пример также можно было реализовать при помощи плагина под названием Countdown.
Как вы уже догадались, помимо этих двух дополнений, существуют и другие. Поэтому сегодня достаточно легко найти быстрое и качественное решение в просторах интернета.
Более подробно познакомиться с прелестями библиотеки вы можете из курса Евгения Попова Javascript + jQuery для начинающих, по ссылке.
Я надеюсь вам понравилась моя публикация и научила чему-то новому. А если это так, то подписывайтесь на мой блог и приглашайте в наш дружный коллектив своих знакомых и друзей. Желаю удачи в обучении. Пока-пока!
С уважением, Роман Чуешов
