Создание на сайте счетчика обратного отсчета

Часто бывают моменты, когда возникает желание создать у себя на сайте небольшой блок, где в реальном времени происходит отсчет времени до того или иного знаменательного события. Этот элемент позволит внести некоторую активность в общую статическую картинку сайта и, возможно, в некоторых случаях заинтриговать посетителя. Вообще иногда подобные приемы используются в рекламных акциях - мол, «ждите, через 10 дней будет вам чудо». Все сразу начинают думать, что же это за секрет такой. При этом неосознанно могут себе запомнить, что нужно будет через эти 10 дней поинтересоваться чем же все закончилось. А что, неплохой ход! Ведь любопытных людей достаточно много. Но сейчас не об этом.

Но вернемся в мир ИТ, а конкретно - веб-разработки. Как же можно реализовать подобный элемент у себя на сайте? Для этого, чисто теоретически, можно использовать разные технологии, как-то PHP, Flash, вероятно Ajax, а также Java Script. В этом блоге я применил последний вариант решения. Но перед тем, как его прояснить, приведу пару ссылок на подобные материалы, которые нашел в процессе поиска. Возможно, они вам пригодятся.

1. Wordpress Plugin «Countdown Timer» (версия WP от 2.0 до 2.2.2)
2. Wordpress Plugin «KB Countdown Widget» (версия WP от 2.0 до 2.2.1)
3. Подборка JS скриптов по теме «countdown» (т.е. «обратный отсчет»)
4. Скрипт, который я использовал (описание на англ.)
5. Можно еще поискать в Гугле. Уверен там есть еще что-то интересное по этой теме.

Плагины для Wordpress я отбросил сразу. Во-первых, не было поддержки нужной мне версии, а я читал, что сборка 2.2.х слегка отличается по структуре от 2.3.х, посему не хотел словить каких-то неожиданных глюков на голом месте. Во-вторых, задача достаточно простая и может быть решена с помощью обычного скрипта, не зачем ставить непонятные и потенциально опасные модули. JS файл в данном случае гораздо проще проверить на наличие «непонятных строк» в коде.

Итак, что касается выбранного мною варианта. Для его вставки на сайт, необходимо в код шаблона добавить следующий код:

<script language=”JavaScript”>
TargetDate = “1/1/2008 0:00 AM”;
BackColor = “”;
ForeColor = “white”;
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = ” <em>До Нового Года:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.”;
FinishMessage = “Свершилось! С новым 2008-ым годом!!!”;
</script>
<script language=”JavaScript” src=”путь_к_скрипту/countdown.js”></script>

Предварительно скачиваем сам скрипт здесь и заливаем себе на ФТП. Можно прямо в папку wp-content.
Код, который вставляется на сайт содержит ряд настроек. Это:

• TargetDate - дата, до которой отсчитывается время.
• BackColor - цвет фона для текста со временем.
• ForeColor - цвет текста.
• CountActive - включение счетчика.
• CountStepper - шаг отсчета (в секундах).
• LeadingZero - ноль перед цифрами, например числа 09, 08, 07 и т.д.
• DisplayFormat - формат отображения текста счетчика.
• FinishMessage - сообщения, когда счетчик досчитает до нужной даты.

Конечно, в данном скрипте учтены не все нюансы, как например, разные окончания для «дней», «часов» при определенных числовых значениях. Кроме того, насколько я понял, время берется из показаний на вашем локальном компьютере - если оно у вас идет неправильно, то и новый год под данному счетчику можете встретить не вместе со всеми:)
И, тем не менее, скрипт имеет право на существование - он достаточно компактный и обладает нужным функционалом. Для самого простого применения сгодится на все 100%. Энтузиасты могут дописать необходимые свойства вручную:) После чего воплотить результат работы в полноценный плагин для Wordpress.