Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Простой javascript код для отсчёта времени на вашем блоге

Доброго времени суток, гики веб-разработки и подписчики моего блога. Сегодня я вместе с вами постараюсь создать в JavaScript отсчет времени назад! Это достаточно популярный прием на различных веб-сайтах с продажей акционной продукции или услуг.

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

Обратный отсчет начался! ...Но зачем?

Чтобы использовать какую-либо технологию или инструмент на своем веб-ресурсе, нужно для начала понимать, а зачем он там вообще нужен и какую роль сыграет в дизайне. Именно поэтому я начал с этой главы.

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

Так вот, чтобы удержать продукцию «на плаву» и сделать ее конкурентной среди аналогичных товаров, владельцы предлагают своим потребителям скидки и акции. Некоторые их них могут длиться несколько дней.

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

Точно такой же прием можно найти и на других сервисах, торгующих купонами, услугами и т.д.

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

Если отойти от сайтостроения и вспомнить, что еще можно писать на JavaScript, то здесь нельзя пропустить из виду игры. Каждый из вас играл в веб-игры, где уровень заканчивается через определенное количество минут или секунд. Вот там всегда сверху или снизу игрового поля можно отыскать таймер отсчета времени в обратном направлении.

Готовые решения для ленивых

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

Среди них наиболее популярными считаются Countdown (когда цифры переворачиваются, как листы календаря), Time Circles (показ времени в виде заполняемых цветом колец), FlipClock (несколько похож на первый плагин), 5sec Maintenance Mode (предлагает шесть разнообразных и очень забавных шаблонов с обратным отсчетом времени) и т.д.


Кстати, если вы хотите опробовать что-то из перечисленного списка, то среди моих статей о jQuery найдите публикацию о таймерах обратного отсчета. Там я во всех подробностях описал работу Time Circles и привел пример кода.

Помимо готовых плагинов, существуют и онлайн-генераторы как, например, http://megatimer.ru/. На сайте представлен пример отсчета от серверного времени. Там же вы можете настроить внешний вид, цветовую палитру, время отсчета (от даты или задать определенное количество дней, часов, минут) и тип таймера, а после скачать код.

В качестве примера вставьте в любой редактор кода, например, в http://xhtml.ru/instr/html_editor/ следующую программу и проанализируйте результат.

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
31
32
33
34
35
36
37
<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Счетчик обратного времени, сгенерированный в Mega Timer</title>
<style>
body {
margin: 0;
padding:0;
text-align: center;
color: red;
 
}
.main {
width: 66%;
margin-left: 17%;
margin-top: -22px;
background: url(http://www.ubackground.com/_ph/21/817519182.jpg) center;
}
h1 { text-decoration: underline;}
img{ 
width: 560px;
 margin-top: 15px;
border-radius: 14px;
box-shadow: 0 0 3px orange, 0 0 7px orange, 0 0 23px orange, 0 0 55px yellow;
</style>
 </head>
 <body>
<div class="main">
<h1>Горячая путевка в Египет</h1>
<h3>Акция действует</h3>
<!--Сгенерированный скрипт -->
<script src="http://megatimer.ru/s/7fd2068bcf0ff058b21dd74d8ca25b1f.js"></script>
  <img src="http://www.tui.ua/getfile/a812cd77-6cf7-4f2b-a4a3-708204ba9220/1/"  alt="Египет">
</div>
</body>
</html>

От теории к практике

Ну, вот мы и разобрали с вами различные способы внедрения счетчика часов на ваш сайт. Однако не обсуждали, как же создать его самим. Поэтому звездный час программирования настал!

Для начала разберем скрипт.

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
/*Для того, чтобы задать конкретную дату, до которой будет вестись отчет, вам нужно прописать timeend= new Date(ГОД, МЕСЯЦ-1, ДЕНЬ); или же для уточнения всех параметров timeend= new Date(ГОД, МЕСЯЦ-1, ДЕНЬ, ЧАСЫ-1, МИНУТЫ); В моем случае я указал дату 26.12.2016*/
timeend= new Date(2016, 11, 26); 
/* Так как у нас есть браузеры, которые по разному обрабатывают функцию getYear(), то задать ее можно следующим образом:
timeend= new Date(timeend.getYear()>1900?(timeend.getYear()+1):(timeend.getYear()+1901),0,1);*/
//начинаем писать саму функцию обработки
function Timer() {
	today = new Date(); //считываем текущее время
	today = Math.floor((timeend-today)/1000); 
	tsec=today%60;
 today=Math.floor(today/60);
//делаем проверку на незначащие нули
 if(tsec<10) tsec='0'+tsec;
	tmin=today%60; 
today=Math.floor(today/60);
 if(tmin<10)tmin='0'+tmin;
	thour=today%24; 
today=Math.floor(today/24);
/*производим поиск по идентификатору и присваиваем разметке нужную информацию. В данном случае числа.*/
	document.getElementById('day').innerHTML=today;
        document.getElementById('hour').innerHTML=thour;
        document.getElementById('min').innerHTML=tmin;
        document.getElementById('sec').innerHTML=tsec;
/* setTimeout – это функция задержки выполнения кода. Первый аргумент указывает, что нужно исполнять. А второй – на сколько задерживать (в миллисекундах). В нашем случае на 1 секунду.*/
	window.setTimeout("Timer()",1000);
}

Полностью код программы выглядит следующим образом:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Счетчик обратного времени, сгенерированный в Mega Timer</title>
 
<script type="text/javascript">
timeend= new Date(2016, 11, 26);
 
 
function Timer() {
	today = new Date();
	today = Math.floor((timeend-today)/1000);
	tsec=today%60;
 today=Math.floor(today/60); 
if(tsec<10)tsec='0'+tsec;
	tmin=today%60;
 today=Math.floor(today/60);
 if(tmin<10)tmin='0'+tmin;
	thour=today%24; 
today=Math.floor(today/24);
 
	document.getElementById('day').innerHTML=today;
        document.getElementById('hour').innerHTML=thour;
        document.getElementById('min').innerHTML=tmin;
        document.getElementById('sec').innerHTML=tsec;
	window.setTimeout("Timer()",1000);
}
</script>
<body onload="Timer()">
 
</script>
<style>
body {
margin: 0;
padding:0;
text-align: center;
color: red;
 
}
.main {
width: 66%;
margin-left: 17%;
margin-top: -22px;
background: url(http://www.ubackground.com/_ph/21/817519182.jpg) center;
}
h1 { text-decoration: underline;}
img{ 
width: 560px;
 margin-top: 15px;
border-radius: 14px;
box-shadow: 0 0 3px orange, 0 0 7px orange, 0 0 23px orange, 0 0 55px yellow;
}
 
.time{
    font-size: 22px;
    text-align: center;
    text-shadow: 1px 1px 3px #010, 3px 3px 5px #010;
 
}
tr {
background: rgba(255, 215, 0, .6);
 
}
th {
font-size: 29px;
}
</style>
 </head>
 <body>
<div class="main">
<h1>Горячая путевка в Египет</h1>
 
<h3>Акция действует </h3>
<table class="time" align="center" cellspacing="4" cellpadding="4">
  <tr>
    <th><span id="day"></span> :</th>
    <th><span id="hour"></span> :</th> 
    <th><span id="min"></span> :</th>
    <th><span id="sec"></span> </th>
  </tr>
  <tr>
    <td>Дней</td>
    <td>Часов</td> 
    <td>Минут</td>
    <td>Секунд</td>
  </tr>
</table>
 
 
  <img src="http://www.tui.ua/getfile/a812cd77-6cf7-4f2b-a4a3-708204ba9220/1/"  alt="Египет">
</div>
</body>
</html>

Если вы почерпнули что-то полезное для себя и вам понравилась данная публикация, то подписывайтесь на обновления блога. Буду благодарен за репосты. До скорой встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 72 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Сергей

    Не плохой css. Спасибо. Лишних тегов Mega Timer нагенерировал. Закрывающий script и открывающий body

    04.12.2016 в 00:59