This page has been robot translated, sorry for typos if any. Original content here.

Таймер зворотного відліку, в т.ч. до нового року

Таймер зворотного відліку є досить простий і класичної завданням для 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>"