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