Таймер обратного отсчета
Суббота, Февраль 14, 2009 19:49 
При создании одного из очередных проектов, столкнулся с проблемой создания счетчика времени, который бы отсчитывал по дням/часам/минутам/секунда время до наступления определенного события. Воспользовавщись, 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>
Вот и все 
Loading ...
greenkaktusx сообщил:
Февраль 14th, 2009 21:09
С одной стороны вещь конечно интересная, хотя лично не пользуюсь этим. Вы лучше расскажите как можно вывод этого времени оформить более красиво! Буду благодарен!
admin сообщил:
Февраль 14th, 2009 22:44
вывод, элементарно в css стиле прописываем .timer1 {параметры отображения } и будет Вам счастье
greenkaktusx сообщил:
Февраль 15th, 2009 13:23
Спасибо!
Иван сообщил:
Апрель 24th, 2009 16:16
Доброго времени суток! Подскажите пожалуйста как после окончания таймера отправить форму на сервер или имитировать нажатие кнопки на форме (которая отправит форму на сервер)
hitrii сообщил:
Май 7th, 2009 9:56
Подскажите, как сделать:
1.Таймер берет сегодняшнею дату прибавляет к ней например 30 мин. и пошел отсчет.
2. есть ещё кнопка при нажатие на неё увеличивается время на 5 мин.
Ромаха сообщил:
Май 28th, 2009 16:43
Большое спасибо за данный скрипт. Согласен с автором — в инете есть все, но не то, что нужно. Тоже запарился ковырять jquery.timer. Назад считает, но без минут и часов. А в функцию everyTime хер засунешь все условия... Короче, благодарен:)
Руслан сообщил:
Июль 5th, 2009 20:50
Скажите, а можно ли этот таймер размножить. Или как это сделать. Пример с аукционом.
WebMast сообщил:
Июль 13th, 2009 8:16
Руслан, если ты используешь какой-то скрипт для самого аукциона, то он должен содержать скрипт отсчета.
Kristina сообщил:
Июль 21st, 2009 19:08
Здравствуйте.
Спасибо за скрипт, долго искала. Хотела бы спросить, я когда меняю дату на нужную, то мне он выводит дату отсчёта в 2 раза больше, а год сменила с вашего 2010 на 2009. Подскажите, где ошибка, я просто ещё новичок, а таймер очень нужен. Заранее спасибо.
WebMast сообщил:
Июль 23rd, 2009 14:59
Kristina, извини, я не смогу тебе сейчас помочь. Таймер реализовывал не я, а vanoID. К сожелению он сейчас не может заниматься блогом.
Кристина Алямкина сообщил:
Июль 23rd, 2009 17:43
Понятно, очень жаль, мне так нужен был он
Кристина Алямкина сообщил:
Июль 23rd, 2009 18:06
Спасибо, уже разобралась,а вот с css не понятно, какие параметры вводить, если можете, подскажите :-[
WebMast сообщил:
Июль 23rd, 2009 18:33
Вот нужные тебе параметры:
#timer1 {}
#timer2 {}
Кристиночка сообщил:
Июль 23rd, 2009 18:43
Большое спасибо
сейчас попробую
SerG сообщил:
Август 15th, 2009 22:34
setTimeout(«CountBack('» + myDiv + «',» + (secs-1) + «);», 990);
Почему именно 990 мс, а не 1000?
syncscieste сообщил:
Ноябрь 17th, 2009 6:54
Сенкс. Интересно, и вообще полезный у Вас блог
syncscieste сообщил:
Ноябрь 17th, 2009 9:32
Очень хороший пост! Спасибо за проделанную работу!
Иван сообщил:
Февраль 1st, 2010 2:19
Пойду попробую...
Никита сообщил:
Март 22nd, 2010 16:44
не хочет запускаться с днём от
StartCountDown("timer2","01 до 04/04/2010 11:00 PM -0400")в чём проблемв?
leroj сообщил:
Апрель 8th, 2010 13:01
Кто-нибудь знает где взять скрипт с отсчетом в секундах с последующим событием: например появляется ссылка или играет музыка и т.д.?
Ivan сообщил:
Апрель 8th, 2010 17:40
поставь вместо timer2 — clock1
Malika сообщил:
Май 29th, 2010 12:59
Я хотела бы установить таймер обратного отсчета времени в группу в контакте возможно ли это?
очень жду вашего ответа!!!
спасибо!:)
Евгений Жлобо сообщил:
Май 31st, 2010 10:18
Я думаю нет, хотя и не спец вконтакта.
Александр сообщил:
Июнь 25th, 2010 2:34
Здравствуйте! Подскажит,пожалуйста, а как создать счетчик, если блог зависит от сайта, а сайт не предоставляет поддержку JavaScript...может есть какие-нибудь варианты( типа SWF )или как-нибудь по-другому... просто очень хочется сделать такой счетчик!
Спасибо!!!
Евгений Жлобо сообщил:
Июнь 25th, 2010 9:53
Без разрешенных скриптов нельзя. Флэш тоже работает по технологии js.
Александр сообщил:
Июнь 25th, 2010 12:39
У меня проходит запись вот такого типа:
как бы её переделать под такой счетчик...возможно ли это?
Александр сообщил:
Июнь 25th, 2010 12:42
У меня проходит запись вот такого типа: «param name="movie" value="http://bestof.ucoz.ru/servis/timer/ny/1/green.swf" /></noscript»
как бы её переделать под такой счетчик...возможно ли это?
Евгений Жлобо сообщил:
Июнь 25th, 2010 14:06
Ну если такое проходит, то возможно. А вот как, честно, не знаю.
Александр сообщил:
Июнь 25th, 2010 16:04
Спасибо! Видно для создания flash мне ещё очень далеко...