Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Создание на сайте счетчика обратного отсчета времени

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

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

05.12.07

Категории: Web разработка.

Теги: , , ,

38 Comments
  1. Mr.KTO

    Я так понял, что Untz Drain (II) — это, чтобы я обратил внимание на этот пост.
    Ну, ладно…

  2. Tod

    Да, реализация во флеше прикольная:)
    Mr.KTO, не совсем. У тебя денег мало было:)

  3. Mr.KTO

    2 Миша Квакин:
    Чёрт, а мне пришлось декомпилить чужую флэшку, а вот оказывается где источник.
    (первый коммент был невидим тогда)

  4. Волотко Дмитрий

    Я как-то раз столкнулся с необходимостью счётчика.
    Что бы не было проблем со временем, просто вытягивал время сервера + давал необходимые поправки (17 минут, кажется) с помощью PHP, ну а потом JS’м выводил.

  5. loveserial

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

  6. Tod

    Для 4-х, увы, не тестировал, видимо, там пришлось бы немного код подправить.

  7. wigrih

    Хотелось бы иметь программу-счетчик, сам мастерить не умею. Суть программы: Включаю и задаю задачу, например, » До Нового года осталось 186 дней, 12 часов и 17 минут. Даю старт и где-то в окошечке или в другом месте ( хозяин барин) пошел отсчет. Нужная тема должна набираться через клавиатуру. Я на сайте видел такое: » До конца лета осталось столько-то дней, часов, минут и даже секунд. Мне бы такое. Возможно такая программа уже существует, но я нигде не встречал. ПОМОГИТЕ, буду благодарен. Я думаю прога очень даже простенькая. Может кому-то интересно будет смастерить. Если, что, мой адрес:wigrih@rambler.ru. Буду надеяться и ждать. Заранее спасибо неравнодушным мастерам.

  8. Tod

    К сожалению, я о таком не слышал, точнее не встречал. Если кто-то возьмется за это дело или подскажет — буду также признателен.

  9. Илья

    2loveserial
    а это что http://www.hashemian.com/tools/download.php?u=1002 ??
    из той же статьи, стоит только почитать
    2 счетчика на одной странице и ничего не глючит

  10. amateur

    То что надо =) жаль что в поиске по «скрипт обратного отсчета времени» ваша страница лишь во второй десятке serp

  11. Tod

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

  12. GRRF

    Используйте вставку php кода и кросбраузерность вам не почем=)

    http://vladwebstudio.ru/?q=obratniy-otschet
    здесь пример

  13. Антон

    Ха, а часики то наши! :)
    http://palio.ru/bud-lart.htm

  14. Tod

    Антон, это совпадение, нашел где-то в инете:) Надеюсь, вы не в обиде.

  15. Gosha

    Огромное спасибо, давно искал такой скрипт.

  16. GLOOMY

    Скоро конец света ))) Поставлю отсчет. Спасибо, давно искал именно его.

  17. leroj

    А где бы взять такой срипт, чтобы отсчитывалось, например, 15 секунд, а потом появлялась ссылка или картинка? Может кто подскажет?

  18. VsOK

    Почему-то он не правильно выводит дату. К примеру в опере пишет, что остался 1 день а в Мазиле и IE, что осталось 206 дней. Не могу понять в чем тут дело

  19. Tod

    VsOK, к сожалению, не подскажу почему так, давно смотрел этот скрипт, может сейчас есть получше.

  20. VsOK

    Если дату вписывать в формате ММ/ДД/ГГГГ , то будет во всех браузерах правильно высчитывать, а если ДД/ММ/ГГГГ, то правильно только в Опере

  21. Zahariya

    Подскажите, в этом скрипте ведь нет обновления? Мне нужны одни дни, а часы и минуты нет, я их убрал, но видно что скрипт стоит, как влепить обновление, хотя-бы раз в минуту?

  22. Tod

    Zahariya, я уже точно не помню, но если там нет обновления, то я бы рекомендовал найти скрипт часов, который работает в реальном времени и совместить с этим. Хотя проще всего поискать другие скрипты, которые полностью отвечали вашим требованиям.

  23. anna

    А как вывести «день, дня, дней» ?

  24. Tod

    anna, если честно, я уже не помню как работает скрипт. Если он не выводит разные окончания, то, скорее всего, нужно их будет добавлять в код скрипта самостоятельно.

  25. Мохнатый

    Спасибо, норм скрипт, в комментах тоже полезности нашел…

  26. WebMax

    А как сделать так, чтобы можно было увеличить время больше чем на 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»;

  27. Tod

    WebMax, если честно, давно все это было и я уже не вспомню как и что там в скрипте.

  28. AlexKey

    WebMax, первое что бросилось в глаза — время указывается в зависимости от времени суток, т.е. до полудня или после. В твоем случае 14 часов — это после полудня, поэтому нужно не 14 AM, а 14 PM


    if (typeof(TargetDate)==”undefined”)
    TargetDate = “12/31/2020 14:00 PM”;

    Попробуй

  29. Сергей

    Скрипт неплохой. Интересует следующее: Как мне добавить ссылку, либо текст, например, ниже таймера таким образом, чтобы по окончании этого самого таймера данный текст (ссылка) исчезала и появлялась другая надпись???
    Очень нужно!!!

  30. Tod

    Сергей, ну так в скрипте есть возможность указать параметр «FinishMessage» который выводится после даты, если я правильно все помню.

  31. Сергей

    Этот параметр выводит надпись после окончания времени, а я бы хотел вывести надпись (ссылку) таким образом, чтобы пока идет обратный отсчет эта надпись (ссылка) отображалась, а уже после его окончания она исчезала.
    Собственно я бы хотел все это реализовать на таймере, который привел Илья в своем комментарии (http://www.hashemian.com/tools/download.php?u=1002)
    И раз уж в том скрипте можно выставить несколько таймеров, то можно ли сделать так, чтобы этот параметр (document.getElementById(myDiv).innerHTML = «Окончание торгов»;) выводил различные надписи для различных таймеров?
    В Java Script я к сожалению не разбираюсь, да и поиски в интернете не помогли (может плохо искал).
    Очень нужно реализовать эти функции. Помогите плиз.
    Заранее огромное спасибо.

  32. Tod

    Сергей, к сожалению, я тоже в этом не силен настолько чтобы решить вашу задачу.

  33. Дмитрий Князев

    Спасибо, статья помогла.
    Благодаря ей добавил на свою вёрстку landing page такой таймер.
    http://knyazev-web.ru/works/landing2/index.php

  34. AlexKey

    Дмитрий Князев, какой таймер? Я ничего похожего на таймер не нашел :) И слайдер не работает, и вообще он просто картинка :)

  35. Saiman

    Есть бесплатный таймер http://megatimer.ru/
    В принципе, из всех готовых таймеров — самый лучший функционал. Единственное, не хватает мультиязычности (тк у меня клиенты забугорные). Конечно, лучше самому запиливать, но иногда это дольше и сложнее )

  36. Tod

    Saiman, спасибо за ссылку, просто пост достаточно старый, поэтому и информация по таймеру давно не обновлялась.

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.