Таймер обратного отсчета, в т.ч. до Нового Года

Таймер обратного отсчета является довольно простой и классической задачей для javascript.

Пример работы скрипта таймера до Нового Года:

Отсчет времени до Нового Года

Рассмотрим создание счетчика дней до определенной даты и такой же счетчик, но более олдскульный с отсчетом часов, минут и секунд.

<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>

Вариант с днями, часами, минутами и секундами (отсчет времени до наступления Нового Года):

<script type="text/javascript">function newYearIn(){ var days=" дней " var now = new Date(); var newYear = new Date("Jan,01,2011,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>"; setTimeout("newYearIn()",10); } 
 else {document.getElementById("newyear").innerHTML = "C НОВЫМ ГОДОМ !!!";}}newYearIn();</script>

Для того чтобы счетчик времени (таймер) до Нового Года появился на странице, необходимо до скрипта на странице расположить любой тег с id="newyear", например:

<p id="newyear">Время, оставшееся до наступления Нового Года</p>

<script type="text/javascript">
function newYearIn()
{ ...

а в самом скрипте установить ту дату нового года, которую вы обычно празднуете (например, ближайший Новый Год в России: "Jan,01,2011,00:00:00").

[UPD]: 1. Для того чтобы поменять шрифт (размер и цвет), нужно убрать теги <font size=20> и <font> и вставить описание стиля <style>p#newyear {font-size:27px; color:pink;}</style> для строки времени. 2. Для того чтобы разбить строку на две вставьте в нужное место строки "<br>", например так: "До Нового Года осталось: <br>"