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

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

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

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

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

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

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

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

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

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

Прочитано 46753 раз
Свежие заметки
Наверх