Матвей Земсков

Заметки веб-мастера

Воскресенье, 25 августа 2013 14:57

Счетчик обратного отсчета на javaScript

Оцените материал
(13 голосов)

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

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

Сейчас я рассмотрю пример такого счетчика, написанного на JavaScript. Кроме того, в интернете можно найти уже готовые jQuery countdown счетчики. Пару из них я также упомяну в этой статье.

Пример jQuery countdow счетчика

Итак, приступим.

Сначала создаем html-элемент, в котором будет выводиться счетчик. Например, такой.

HTML

	<body>
	…
	<div id="event-mess"> <span id="timetoevent"></span></div>
	…
	</body>

Теперь можно приступать к программированию. Код получится не очень сложный - будет состоять из одной функции. В качестве аргумента она будет принимать дату предстоящего события в виде объекта Date() и возвращать количество дней, часов, минут и секунд до этой даты как результат своей работы.

JavaScript

	 // Функция вычисляет время до события
	 function timeToEvent(eventDate)
	  {
	      var now = new Date();
	      var output = '';		
	     // количество дней до события
	     var daystoED = Math.floor(Math.round(eventDate-now)/86400000);
	     daystoED = (daystoED < 1) ? "0"+daystoED : daystoED;
	     // количество часов до события
   	     var hourstoED = 24 - now.getHours() - 1;
           hourstoED = (hourstoED < 10) ? "0"+hourstoED : hourstoED;
	     // количество минут до события
  	     var minutestoED = 60 - now.getMinutes() - 1;
    	     minutestoED = (minutestoED < 10) ? "0"+minutestoED : minutestoED;
 	     // количество секунд до события
  	     var secondstoED = 60 - now.getSeconds() - 1;
 	     secondstoED = (secondstoED < 10) ? "0"+secondstoED : secondstoED;		
	     //сообщение
           output = daystoED+" дн. "+hourstoED+" час. "+minutestoED+" мин. "+secondstoED+" сек.";
	   return output;
	}

Затем, после загрузки страницы будут определяться параметры, с которыми будет работать функция, а именно дата события, которая будет передаваться в функцию, а также сообщение и элементы страницы, куда будет выводиться сообщение и результат работы функции.

Также в коде будет поставлено условие: в случае если текущая дата больше переданной даты события, то есть событие уже наступило, функция вызываться не будет.

HTML

	<head>
	…
	<script type=”text/javascript”> 
	 window.onload = function(){
	   // текущая дата
	   var now = new Date();	   
	   // дата предстоящего события (год, месяц, число)
	   var eventDate = new Date(2013,7,31);
	   var span = document.getElementById('timetoevent');
	   var text = "До окончания распродажи осталось ";
	   var div = document.getElementById('event-mess');
	   // если событие еще не наступило
	   if(now < eventDate){
		 div.firstChild.nodeValue = text;
		   window.setInterval(function(){ 
			  span.innerHTML = timeToEvent(eventDate); 
			},1000);	   	   
		}		   		
	 }
	</script>
	…
	</head>

Как я и обещал, код получился совсем несложный. Тем не менее, нужно обратить вниманием на то, что дата передается в формате объекта Date(), а именно, номер месяца отсчитывается с нуля (Январь) до 11 (Декабрь). То же самое касается часов (0-23), минут (0-59) и секунд (0-59), если время события также нужно указать.

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

  • jquery-counter – бесплатный jQuery countdown счетчик, разработанный на JavaScript и CSS3. Может вести обычный и обратный отсчет времени. Параметры могут передаваться в виде атрибутов элемента, в котором будет размещаться счетчик (например, <span>) или при инициализации счетчика в виде объекта JavaScript.
  • flipCounter 1.2 – тоже бесплатный счетчик, гибко настраиваемый и удобный в применении. На странице проекта даны подробные инструкции по его использованию.

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

Скачать код счетчика из статьи

Прочитано 32333 раз
Добавить комментарий

Комментарии   

 
0 # Василий 24.02.2014 17:44
А как сделать так, чтобы по истечении срока, со странички,где установлен счетчик автоматически убиралась какая либо информация, к примеру картинка, а так же исчезал сам счетчик?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 03.03.2014 11:16
Можно попробовать добавить в код вызова функции блок else. Код в нем будет приблизительно такой:
if(now < eventDate){

}
else
{
div.parentNode.removeChild(div);
}
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Андрей 19.06.2014 00:47
Блин, а где дату предстоящего события заносить?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 19.06.2014 10:32
Дата события устанавливается в следующей строке:
var eventDate = new Date(год,месяц,день);
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Андрей 19.08.2014 06:44
А как можно сделать несколько счетчиков с одной или разными датами на одной странице ?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 21.08.2014 09:46
Да, думаю, что можно. Если переписать приведенную функцию в ООП - то есть создать функцию-конструктор, а затем создавать объекты на странице. Нарпимер, как здесь http://mattweb.ru/component/k2/item/93-primenyaem-javascript-oop-n%D0%B0-veb-stranitse
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Виталий 12.01.2015 14:08
Как все сложно дико ( Можно использовать готовый и бесплатный счетчик онлайн http://megatimer.ru/
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 14.01.2015 10:28
Виталий, конечно же, разработчик вправе выбирать удобные для себя инструменты. Только на мой взгляд сторонние инструменты не очень надежны. Они могут подвести в любой момент :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Иван 02.12.2015 20:23
что это за число 86400000 ? в строке
var daystoED = Math.floor(Math.round(eventDate-now)/86400000);
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 04.12.2015 16:14
Иван, это количество миллисекунд в сутках.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: