Наверх

Загрузка постов


CodeMatrix

A+ R A-

Обратный отсчет времени на js

Создадим обратный отсчет времени на  javascript.

Для начала создадим структуру, где наш результат будет писаться в div rezult

<!DOCTYPE html>
<head>
<title>Sample page</title>
</head>

<body>
	<div id="text">До Нового года осталось </div>
        <div id="rezult"></div>
</body>
</html>

Далее после объявления div rezult впишем сам скрипт в тегах script

function countdown(){   /* создадим функцию countdown */
var today = new Date().getTime();   /* определим сколько милисекунд прошло с 1970 года до данного момента и запишем в переменную today */
var end = new Date(2013,0,1).getTime();   /* определим сколько милисекунд пройдет c 1970 до указанного в скобках числа (1 января 2013) и запишем в переменную end */
var dateX = new Date(end-today);   /* узнаем разницу в милисекундах и запишем в переменную dateX */
var perDays = 60*60*1000*24;   /* произведем расчет милисекунд в сутки и запишем в переменную perDays */
date_to_write = '
' + (Math.round(dateX/perDays) + 'd&nbsp
' + dateX.getUTCHours().toString() + 'h&nbsp
' + dateX.getMinutes().toString() + 'm&nbsp
' + dateX.getSeconds().toString() + 's&nbsp
'); /* определяем количество дней путем деления dateX на perDays и округляем это значение. А из остатка вычисляем сколько часов, дней, минут и секунд осталось и приводим в строковые данные */ var result = document.getElementById('rezult'); /* создадим переменную result, в которую выберем элемент с id rezult */ result.innerHTML = date_to_write; /* вставляем в div rezult результат вычислений */ } countdown(); /* вызываем функцию */ setInterval(countdown, 1000); /* даем интервал вызова функции в 1 секунду */

И добавляем css свойства

#text, #rezult, #d, #h, #m, #s {float:left;}
#text, #rezult {font-family:Arial, sans-serif; font-size:16pt;}
#text {color:red;}
#d {color:green;}
#h {color:#ffcc00;}
#m {color:#1600ff;}
#s {color:#fc0fc0;}

Данный пример можно посмотреть здесь и скачать.