Таймер зворотного відліку, в т.ч. до нового року
Таймер зворотного відліку є досить простий і класичної завданням для 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>"
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.