Таймер обратного отсчета является довольно простой и классической задачей для javascript.
Рассмотрим создание счетчика дней до определенной даты и такой же счетчик, но более олдскульный с отсчетом часов, минут и секунд.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script language="JavaScript" type="text/javascript"> function count() { month = 'Jan'; // Месяц даты наступления события date = '01'; // Число даты наступления события year = '2006'; // Год даты наступления события theDate = month + ' ' + date + ' ' + year; now = new Date(); setdate = new Date(theDate); timer = (setdate - now) / 1000 / 60 / 60 / 24; timer = Math.round(timer); var message = timer + " дней до вашей даты!"; // Текст сообщения на ваш вкус if (timer == "1") message = timer + " сообытие через день"; // До события один день if (timer == "0") message = "событие менее чем через день"; // До события менее одного дня if (timer == "-1") message = "событие наступило"; // Событие наступило if (timer < "-1") message = ""; // Строка нулевой длины после наступления события document.write(message); } count(); </script> |
Вариант с днями, часами, минутами и секундами (отсчет времени до наступления Нового Года):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <script type="text/javascript"> function newYearIn() { //var days=" дней " var now = new Date(); var newYear = new Date("Jan,01,2013,00:00:00"); var totalRemains = (newYear.getTime()-now.getTime()); if (totalRemains>1) { var RemainsSec=(parseInt(totalRemains/1000)); var RemainsFullDays=(parseInt(RemainsSec/(24*60*60))); /*if ( RemainsFullDays==2 || RemainsFullDays==3 || RemainsFullDays==4 || RemainsFullDays==22 || RemainsFullDays==23 || RemainsFullDays==24 || RemainsFullDays==32 || RemainsFullDays==33 || RemainsFullDays==34 ) { days=" дня " } if ( RemainsFullDays==1 || RemainsFullDays==21 || RemainsFullDays==31 ) { days=" день " }*/ var secInLastDay=RemainsSec-RemainsFullDays*24*3600; var RemainsFullHours=(parseInt(secInLastDay/3600)); if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours}; var secInLastHour=secInLastDay-RemainsFullHours*3600; var RemainsMinutes=(parseInt(secInLastHour/60)); if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes}; var lastSec=secInLastHour-RemainsMinutes*60; if (lastSec<10){lastSec="0"+lastSec}; //document.getElementById('newyear').innerHTML = "<p style='font-size:22px;'>До Нового Года осталось: "+RemainsFullDays+days+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</p>"; document.getElementById('newyear').innerHTML = "<p style='font-size:22px;'>До Нового Года осталось: "+RemainsFullDays+' '+incline(['день', 'дня', 'дней'], RemainsFullDays)+' '+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</p>"; setTimeout("newYearIn()",10); } else {document.getElementById("newyear").innerHTML = "C НОВЫМ ГОДОМ !!!";} } function incline(words,n){ // первый параметр -- 3-и варианта склонения существительного по правилу 1, 2, 5; второй -- сама переменная с числом return words[(n%100>4 && n%100<20)?2:[2,0,1,1,1,2][Math.min(n%10,5)]]; } newYearIn(); </script> |
Для того чтобы счетчик времени (таймер) до Нового Года появился на странице, необходимо до скрипта на странице расположить любой тег с id=»newyear», например:
<p id="newyear">Время, оставшееся до наступления Нового Года</p> <script type="text/javascript"> function newYearIn() { ... |
а в самом скрипте установить ту дату нового года, которую вы обычно празднуете (например, ближайший Новый Год в России: «Jan,01,2012,00:00:00»).
[UPD]: 1. Для того чтобы поменять шрифт (размер и цвет), нужно убрать теги <font size=20> и <font> и вставить описание стиля <style>p#newyear {font-size:27px; color:pink;}</style> для строки времени. 2. Для того чтобы разбить строку на две вставьте в нужное место строки «<br>», например так: «До Нового Года осталось: <br>»
[UPD2]: Еще один вариант счетчика до Нового Года на CSS3 описан на Хабре.
[UPD3]: Good news everyone, в общем на дворе 21-ый век, пора бы уж добавить в скрипт javascript-функцию склонения (incline) существительных. Обновил в во втором сверху («основном») примере с часами и минутами, прежний хардкод закомментирован и его можно удалить (оставил для истории).
Пример работы скрипта таймера до Нового Года:
Отсчет времени до Нового Года
А как запустить таймер один раз для перегрзки страницы?
Для последнего примера можно добавить запуск метода window.location.reload(true) вместо вывода сообщения "С НОВЫМ ГОДОМ !!!". Еще пачка интересных примеров здесь: grizzlyweb.com/webmaster/...ipts/refresh.asp.
Кстати, всех с наступающим .
Большое Спасибо!
А на моем сайте почему то его вообще не видно...просто не отображается
Елена, дописал заметку, чтобы было где на странице выводить таймер до Нового Года, на нее нужно поместить тег с нужным идентификатором ну и установить дату Нового Года до которой вы хотите отсчитывать время.
Спасибо вам огромное за такие нужные уточнения)))))) Есть!!!! Получилось!!!!
я вам очень благодарна. Вотеще остался вопрос,как сделать размерт самого шрифта букв поменьше? цифры размером меня устраивают а вот буквы великоваты. font size=10,вот что я указала ,но ничего не меняется. И еще не сочтите за наглость как сделать таймер в 2 строки : в одной До нового года осталось, а во второй собственно время?
Ага, не за что.
По шрифту сейчас сам разбираюсь (разместил счетчик под статьей для примера), как разберусь допишу.
Спасибо наконец получился таймер нужного цвета и размера. Вот только строку разделить не получается ,как только пишу
«„До Нового Года осталось:“ „+RemainsFullDays+days+RemainsFullHours+“:»+RemainsMinute... сразу исчезает надпись вообще ,
и еще просьба укажите как сделать шрифт жирным...премного благодарна в любом случае.
Надо вставить
внутри сразу после двоеточия. Чтобы добавить жирность добавьте font-weight:bold; в описание стиля. Подробнее о css-стилях тут htmlbook.ru/css/font-weight.
А возможно добавить милисекунды? Попробовал прописать, но не получилось. Сначала сбросился счётчик дней, всё перешло в часы, а затем показал, что настала нужная дата.
Привет, хороший скрипт, но он не хочет отображаться в интернет експлорер...в остальных браузерах работает норм, кто-то знает в чем проблема?
На этой странице таймер работает в 7-ом и 8-ом Internet Explorer, для пользователей 6-го (незнаю где его достать чтобы протестировать) можно сделать подсказку о желательном обновлении.
на 7 и 8 у меня не работает, возможно дело в том, что я через ПШП модуль вставляю этот скрипт в джумлу? Хотя первый скрипт на этой страничке, отображается и в ИЕ
osvita.pl.km.ua/~pvo/ вот ссылка на сайт...с хрома и остальных — норм, с експлорера отображается ток одна строчка без счетчика
Насколько я вижу сейчас таймер работает . Думаю ПШП-модуль тут лишний, это ведь хтмл+жабоскрипт. Вполне должно хватить стандартного пользовательского модуля джумлы.