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

Таймер обратного отсчета

Таймер обратного отсчета

При создании одного из очередных проектов, столкнулся с проблемой создания счетчика времени, который бы отсчитывал по дням/часам/минутам/секунда время до наступления определенного события. Воспользовавщись, google.com  нашел примеры, которые в той или иной степени меня не удолетворяли, незря мой знакомый говорит: «В Интеренете есть все, но ничего что нужно!», вспомнив его фразу, плюнув на монитор и сделав чай я решил написать свой JavaScript таймер обратного отсчета.

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

Вставляем таймер в Sidebar:

Теперь, для адъютантов, я расскажу как вставить данный счетчик в боковую колонку вашего шаблона WordPress. Отрываем sidebar.php в самый конец файла вставляем:

<script language="JavaScript">

StartCountDown("clock1","18/02/2009 12:33 PM -0400")

function StartCountDown(myDiv,myTargetDate)
{
var dthen = new Date(myTargetDate);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs);
}

function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2)
{
s = "0" + s;
}
return (s);
}

function CountBack(myDiv, secs)
{
var DisplayStr;
var DisplayFormat = "%%D%% дней %%H%% часов %%M%% минут %%S%% секунд";
DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
if(secs > 0)
{
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
}
else
{
document.getElementById(myDiv).innerHTML = "Auction Over";
}
}
</script>

А затем, в нужном месте выводим переменные:
<div id="timer1">[timer1]</div>
<div id="timer2">[timer2]</div>

Вот и все :) С уважением, Vasilenko Ivan!
14 февраля 2009 в 19:4934 комментария Верстка

Комментарии — 34 комментария

  1. #369 greenkaktusx в 21:09, 14 февраля 2009: (подписался)

    Ответить | Цитировать

    С одной стороны вещь конечно интересная, хотя лично не пользуюсь этим. Вы лучше расскажите как можно вывод этого времени оформить более красиво! Буду благодарен! :-)

  2. #373 admin в 22:44, 14 февраля 2009:

    Ответить | Цитировать

    вывод, элементарно в css стиле прописываем .timer1 {параметры отображения } и будет Вам счастье :)

  3. #404 greenkaktusx в 13:23, 15 февраля 2009: (подписался)

    Ответить | Цитировать

    Спасибо! :-)

  4. #907 Иван в 16:16, 24 апреля 2009: (подписался)

    Ответить | Цитировать

    Доброго времени суток! Подскажите пожалуйста как после окончания таймера отправить форму на сервер или имитировать нажатие кнопки на форме (которая отправит форму на сервер)

  5. #996 hitrii в 9:56, 7 мая 2009: (подписался)

    Ответить | Цитировать

    Подскажите, как сделать:

    1.Таймер берет сегодняшнею дату прибавляет к ней например 30 мин. и пошел отсчет.

    2. есть ещё кнопка при нажатие на неё увеличивается время на 5 мин.

  6. #1136 Ромаха в 16:43, 28 мая 2009:

    Ответить | Цитировать

    Большое спасибо за данный скрипт. Согласен с автором — в инете есть все, но не то, что нужно. Тоже запарился ковырять jquery.timer. Назад считает, но без минут и часов. А в функцию everyTime хер засунешь все условия... Короче, благодарен:)

  7. #2322 Руслан в 20:50, 5 июля 2009:

    Ответить | Цитировать

    Скажите, а можно ли этот таймер размножить. Или как это сделать. Пример с аукционом.

  8. #2502 WebMast в 8:16, 13 июля 2009:

    Ответить | Цитировать

    Руслан, если ты используешь какой-то скрипт для самого аукциона, то он должен содержать скрипт отсчета.

  9. #2783 Kristina в 19:08, 21 июля 2009: (подписался)

    Ответить | Цитировать

    Здравствуйте.

    Спасибо за скрипт, долго искала. Хотела бы спросить, я когда меняю дату на нужную, то мне он выводит дату отсчёта в 2 раза больше, а год сменила с вашего 2010 на 2009. Подскажите, где ошибка, я просто ещё новичок, а таймер очень нужен. Заранее спасибо.

  10. #2840 WebMast в 14:59, 23 июля 2009:

    Ответить | Цитировать

    Kristina, извини, я не смогу тебе сейчас помочь. Таймер реализовывал не я, а vanoID. К сожелению он сейчас не может заниматься блогом.

  11. #2847 Кристина Алямкина в 17:43, 23 июля 2009: (подписался)

    Ответить | Цитировать

    Понятно, очень жаль, мне так нужен был он

  12. #2848 Кристина Алямкина в 18:06, 23 июля 2009: (подписался)

    Ответить | Цитировать

    Спасибо, уже разобралась,а вот с css не понятно, какие параметры вводить, если можете, подскажите :-[

  13. #2852 WebMast в 18:33, 23 июля 2009:

    Ответить | Цитировать

    Вот нужные тебе параметры:

    #timer1 {}

    #timer2 {}

  14. #2858 Кристиночка в 18:43, 23 июля 2009: (подписался)

    Ответить | Цитировать

    Большое спасибо :) сейчас попробую

  15. #3748 SerG в 22:34, 15 августа 2009: (подписался)

    Ответить | Цитировать

    setTimeout («CountBack ('» + myDiv + «',» + (secs-1) + «);», 990);

    Почему именно 990 мс, а не 1000?

  16. #8183 syncscieste в 6:54, 17 ноября 2009:

    Ответить | Цитировать

    Сенкс. Интересно, и вообще полезный у Вас блог

  17. #8186 syncscieste в 9:32, 17 ноября 2009:

    Ответить | Цитировать

    Очень хороший пост! Спасибо за проделанную работу!

  18. #9298 Иван в 2:19, 1 февраля 2010:

    Ответить | Цитировать

    Пойду попробую...

  19. #9500 Никита в 16:44, 22 марта 2010: (подписался)

    Ответить | Цитировать

    не хочет запускаться с днём от

    StartCountDown("timer2","01 до 04/04/2010 11:00 PM -0400")

    в чём проблемв?

  20. #9592 leroj в 13:01, 8 апреля 2010:

    Ответить | Цитировать

    Кто-нибудь знает где взять скрипт с отсчетом в секундах с последующим событием: например появляется ссылка или играет музыка и т.д.?

  21. #9593 Ivan в 17:40, 8 апреля 2010:

    Ответить | Цитировать

    поставь вместо timer2 — clock1

  22. #9710 Malika в 12:59, 29 мая 2010:

    Ответить | Цитировать

    Я хотела бы установить таймер обратного отсчета времени в группу в контакте возможно ли это?

    очень жду вашего ответа!!!

    спасибо!:)

  23. Я думаю нет, хотя и не спец вконтакта.

  24. #9823 Александр в 2:34, 25 июня 2010:

    Ответить | Цитировать

    Здравствуйте! Подскажит,пожалуйста, а как создать счетчик, если блог зависит от сайта, а сайт не предоставляет поддержку JavaScript...может есть какие-нибудь варианты( типа SWF )или как-нибудь по-другому... просто очень хочется сделать такой счетчик!

    Спасибо!!!

  25. Без разрешенных скриптов нельзя. Флэш тоже работает по технологии js.

  26. #9825 Александр в 12:39, 25 июня 2010:

    Ответить | Цитировать

    У меня проходит запись вот такого типа:

    как бы её переделать под такой счетчик...возможно ли это?

  27. #9826 Александр в 12:42, 25 июня 2010:

    Ответить | Цитировать

    У меня проходит запись вот такого типа: «param name="movie" value="http://bestof.ucoz.ru/servis/timer/ny/1/green.swf" /></noscript»

    как бы её переделать под такой счетчик...возможно ли это?

  28. Ну если такое проходит, то возможно. А вот как, честно, не знаю.

  29. #9828 Александр в 16:04, 25 июня 2010:

    Ответить | Цитировать

    Спасибо! Видно для создания flash мне ещё очень далеко... :)

  30. #10753 Аlmaz в 5:25, 10 декабря 2010:

    Ответить | Цитировать

    #9710 Malika в 12:59, 29 мая 2010: Я хотела бы установить таймер обратного отсчета времени в группу в контакте возможно ли это?

    очень жду вашего ответа!!!

    спасибо!:)

    Тоже очень интересно!

  31. #10811 T.I.A в 2:30, 30 декабря 2010: (подписался)

    Ответить | Цитировать

    Malika написала:Я хотела бы установить таймер обратного отсчета времени в группу в контакте возможно ли это?

    Да,потому-что я сам как-то в одной группе видел,но к сожалению не знаю как его ставить(((

    Так что если кто знает,прошу подскажите как это делается)))

  32. #10914 марат в 14:16, 2 февраля 2011: (подписался)

    Ответить | Цитировать

    а можеь создать мне таймер такой чтоб показывал сколько осталось времени до 8.08.2014 года, чтоб там год месяц день час минуты и секунды!!!??? если сможешь то скинь на mario_09_@mail.ru , или хотя бы полный мануал если есть дай))) спасибо

  33. #18796 Таня в 14:06, 5 января 2013: (подписался)

    Ответить | Цитировать

    Пожалуйста помогите! Не могу понять почему при выводе на страницу там появляется только [timer1]

    [timer2] и все. Что нужно было поменять в коде? я поменяла только StartCountDown («clock1»,"18/02/2009 12:33 PM -0400" на сегодняшнюю дату. Или что-то еще надо было править? Заранее спасибо!

  34. #26092 Ольга в 10:38, 21 марта 2014:

    Ответить | Цитировать

    спасииибо! щас будем разбираться!

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting