Создание на сайте счетчика обратного отсчета
Часто бывают моменты, когда возникает желание создать у себя на сайте небольшой блок, где в реальном времени происходит отсчет времени до того или иного знаменательного события. Этот элемент позволит внести некоторую активность в общую статическую картинку сайта и, возможно, в некоторых случаях заинтриговать посетителя. Вообще иногда подобные приемы используются в рекламных акциях — мол, «ждите, через 10 дней будет вам чудо». Все сразу начинают думать, что же это за секрет такой. При этом неосознанно могут себе запомнить, что нужно будет через эти 10 дней поинтересоваться чем же все закончилось. А что, неплохой ход! Ведь любопытных людей достаточно много. Но сейчас не об этом.
Но вернемся в мир ИТ, а конкретно — веб-разработки. Как же можно реализовать подобный элемент у себя на сайте? Для этого, чисто теоретически, можно использовать разные технологии, как-то PHP, Flash, вероятно Ajax, а также Java Script. В этом блоге я применил последний вариант решения. Но перед тем, как его прояснить, приведу пару ссылок на подобные материалы, которые нашел в процессе поиска. Возможно, они вам пригодятся.
- WordPress Plugin «Countdown Timer» (версия WP от 2.0 до 2.2.2)
- WordPress Plugin «KB Countdown Widget» (версия WP от 2.0 до 2.2.1)
- Подборка JS скриптов по теме «countdown» (т.е. «обратный отсчет»)
- Скрипт, который я использовал (описание на англ.)
- Можно еще поискать в Гугле. Уверен там есть еще что-то интересное по этой теме.
Плагины для 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.
Есть и флэш-реализация этой штуки.
Кирупа описывал когда-то.
Я так понял, что Untz Drain (II) — это, чтобы я обратил внимание на этот пост.
Ну, ладно…
Да, реализация во флеше прикольная:)
Mr.KTO, не совсем. У тебя денег мало было:)
2 Миша Квакин:
Чёрт, а мне пришлось декомпилить чужую флэшку, а вот оказывается где источник.
(первый коммент был невидим тогда)
Я как-то раз столкнулся с необходимостью счётчика.
Что бы не было проблем со временем, просто вытягивал время сервера + давал необходимые поправки (17 минут, кажется) с помощью PHP, ну а потом JS’м выводил.
Мне нужно вывести сразу несколько 4 обратных отсчета, а вот с этим этот скипт глючит.
Пришлось с помощью flash делать.
А в целом скипт очень симпотичный, жаль что нельзя сразу несколько счетчиков вывести.
Для 4-х, увы, не тестировал, видимо, там пришлось бы немного код подправить.
Хотелось бы иметь программу-счетчик, сам мастерить не умею. Суть программы: Включаю и задаю задачу, например, » До Нового года осталось 186 дней, 12 часов и 17 минут. Даю старт и где-то в окошечке или в другом месте ( хозяин барин) пошел отсчет. Нужная тема должна набираться через клавиатуру. Я на сайте видел такое: » До конца лета осталось столько-то дней, часов, минут и даже секунд. Мне бы такое. Возможно такая программа уже существует, но я нигде не встречал. ПОМОГИТЕ, буду благодарен. Я думаю прога очень даже простенькая. Может кому-то интересно будет смастерить. Если, что, мой адрес:wigrih@rambler.ru. Буду надеяться и ждать. Заранее спасибо неравнодушным мастерам.
К сожалению, я о таком не слышал, точнее не встречал. Если кто-то возьмется за это дело или подскажет — буду также признателен.
2loveserial
а это что http://www.hashemian.com/tools/download.php?u=1002 ??
из той же статьи, стоит только почитать
2 счетчика на одной странице и ничего не глючит
То что надо =) жаль что в поиске по «скрипт обратного отсчета времени» ваша страница лишь во второй десятке serp
amateur, оптимизацией сайта занялся только недавно, а времени разгребать все прошлый посты за полгода нет. Подправил ключевики для поста, может, позже всплыву выше, раньше трафик по этому запросу был.
Используйте вставку php кода и кросбраузерность вам не почем=)
http://vladwebstudio.ru/?q=obratniy-otschet
здесь пример
Ха, а часики то наши! :)
http://palio.ru/bud-lart.htm
Антон, это совпадение, нашел где-то в инете:) Надеюсь, вы не в обиде.
Огромное спасибо, давно искал такой скрипт.
Скоро конец света ))) Поставлю отсчет. Спасибо, давно искал именно его.
А где бы взять такой срипт, чтобы отсчитывалось, например, 15 секунд, а потом появлялась ссылка или картинка? Может кто подскажет?
Почему-то он не правильно выводит дату. К примеру в опере пишет, что остался 1 день а в Мазиле и IE, что осталось 206 дней. Не могу понять в чем тут дело
VsOK, к сожалению, не подскажу почему так, давно смотрел этот скрипт, может сейчас есть получше.
Если дату вписывать в формате ММ/ДД/ГГГГ , то будет во всех браузерах правильно высчитывать, а если ДД/ММ/ГГГГ, то правильно только в Опере
Подскажите, в этом скрипте ведь нет обновления? Мне нужны одни дни, а часы и минуты нет, я их убрал, но видно что скрипт стоит, как влепить обновление, хотя-бы раз в минуту?
Zahariya, я уже точно не помню, но если там нет обновления, то я бы рекомендовал найти скрипт часов, который работает в реальном времени и совместить с этим. Хотя проще всего поискать другие скрипты, которые полностью отвечали вашим требованиям.
А как вывести «день, дня, дней» ?
anna, если честно, я уже не помню как работает скрипт. Если он не выводит разные окончания, то, скорее всего, нужно их будет добавлять в код скрипта самостоятельно.
Спасибо, норм скрипт, в комментах тоже полезности нашел…
А как сделать так, чтобы можно было увеличить время больше чем на 12 часов, ведь в сутках 24 часа и когда я ставлю например 14 часов оно выдаёт ошибку, тоесть больше 12 добавить невозможно?
это максимум плюс 12-часов:
if (typeof(TargetDate)==»undefined»)
TargetDate = «12/31/2020 12:00 AM»;
а мне надо плюс например 14 часов:
if (typeof(TargetDate)==»undefined»)
TargetDate = «12/31/2020 14:00 AM»;
WebMax, если честно, давно все это было и я уже не вспомню как и что там в скрипте.
WebMax, первое что бросилось в глаза — время указывается в зависимости от времени суток, т.е. до полудня или после. В твоем случае 14 часов — это после полудня, поэтому нужно не 14 AM, а 14 PM
…
if (typeof(TargetDate)==”undefined”)
TargetDate = “12/31/2020 14:00 PM”;
Попробуй
Скрипт неплохой. Интересует следующее: Как мне добавить ссылку, либо текст, например, ниже таймера таким образом, чтобы по окончании этого самого таймера данный текст (ссылка) исчезала и появлялась другая надпись???
Очень нужно!!!
Сергей, ну так в скрипте есть возможность указать параметр «FinishMessage» который выводится после даты, если я правильно все помню.
Этот параметр выводит надпись после окончания времени, а я бы хотел вывести надпись (ссылку) таким образом, чтобы пока идет обратный отсчет эта надпись (ссылка) отображалась, а уже после его окончания она исчезала.
Собственно я бы хотел все это реализовать на таймере, который привел Илья в своем комментарии (http://www.hashemian.com/tools/download.php?u=1002)
И раз уж в том скрипте можно выставить несколько таймеров, то можно ли сделать так, чтобы этот параметр (document.getElementById(myDiv).innerHTML = «Окончание торгов»;) выводил различные надписи для различных таймеров?
В Java Script я к сожалению не разбираюсь, да и поиски в интернете не помогли (может плохо искал).
Очень нужно реализовать эти функции. Помогите плиз.
Заранее огромное спасибо.
Сергей, к сожалению, я тоже в этом не силен настолько чтобы решить вашу задачу.
Спасибо, статья помогла.
Благодаря ей добавил на свою вёрстку landing page такой таймер.
http://knyazev-web.ru/works/landing2/index.php
Дмитрий Князев, какой таймер? Я ничего похожего на таймер не нашел :) И слайдер не работает, и вообще он просто картинка :)
AlexKey, глянь сейчас:
http://knyazev-web.ru/works/landing2/index.php
Есть бесплатный таймер http://megatimer.ru/
В принципе, из всех готовых таймеров — самый лучший функционал. Единственное, не хватает мультиязычности (тк у меня клиенты забугорные). Конечно, лучше самому запиливать, но иногда это дольше и сложнее )
Saiman, спасибо за ссылку, просто пост достаточно старый, поэтому и информация по таймеру давно не обновлялась.