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