Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Пример вывода даты и времени на сайте с помощью JavaScript.

Для получения текущего времени воспользуемся объектом Date(), который без аргументов и возвращает нужное нам текущее время.

time=new Date();

Но формат даты, определяемый этим объектом, нас не устраивает, для примера посмотрите

alert (Date());

Для получения нужного нам формата нужно определить каждый компонент даты, то есть нужно вычислить день месяца, номер месяца и т.д. Для этого воспользуемся следующими функциями

getSeconds() - возвращает число секунд в диапазоне от 0 до 59;

getMinutes() - возвращает число минут в диапазоне от 0 до 59;

getHours() - возвращает число часов в диапазоне от 0 до 23;

getDay() - возвращает день недели в диапазоне от 0 до 6 (0->воскресенье, 1 -> понедельник, и т.д.);

getDate() - возвращает день месяца в диапазоне от 1 до 31;

getMonth() - возвращает номер месяца в диапазоне от 0 до 11;

getFullYear() - возвращает год в виде четырех чисел, минимальное значение 1970.

То есть часы, минуты и секунды получим следующим образом

time=new Date();

time_sec=time.getSeconds();// получаем секунды

time_min=time.getMinutes();// получаем минуты

time_hours=time.getHours();// получаем часы

Если возвращаемое значение функциями getSeconds(), getMinutes() и getHours() будет меньше 10, то цифры 0 не будет впереди. Поэтому напишем функцию представляющую вид часов в привычном для виде

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

}

Теперь нужно нам это время вывести на экран монитора. Воспользоваться функцией document.write() не получится, так как нам нужно время обновлять через определенный промежуток времени. Воспользуемся свойством innerHTML, которое есть у каждого элемента HTML-кода. Это свойство содержит весь HTML-код данного элемента. Его можно изменять. И если его изменить, то изменится HTML-код, содержащийся в элементе, а, следовательно, и содержимое веб-странички. Поэтому поступим следующим образом. Будем выводить время в элементе span, которому дадим уникальный идентификатор hours. Впоследствии в JavaScript получим к нему доступ выражением

obj_hours=document.getElementById("hours")

obj_hours=document.getElementById("hours");

function wr_hours()¶{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

obj_hours.innerHTML=time_wr;

}

wr_hours();

</script>

В данном случае время не будет меняться, но чтобы время обновлялось, нужно функцию wr_hours() вызывать через определенное время. В этом нам поможет функция setInterval(), которая выполняет заданный код каждый раз по истечению заданного промежутка времени. Время в этой функции задается в миллисекундах.

setInterval("{выражение}", {временной интервал});

Мы зададим интервал равный одной секунде (1000 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код

obj_hours=document.getElementById("hours");

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval("wr_hours();",1000);

</script>

Теперь добавим дату и день недели. Так как функции getDay() и getMonth() возвращают лишь числа, а мы хотим видеть названия дня недели и месяца, то добавим два массива с перечислением дней недели и названиями месяцев.

name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа", "сентября","октября", "ноября","декабря");

name_day=new Array ("воскресенье","понедельник","вторник", "среда","четверг", "пятница","суббота");

В итоге получим следующий код

<html>

<head>

<title>Часы и дата на JavaScript</title>

</head>

<body>

<h1>Часы и дата на JavaScript</h1>

</div>

obj_hours=document.getElementById("hours");

name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");

name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

time_wr=" сегодня "+name_day[time.getDay()]+", "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval("wr_hours();",1000);

</script>

</body>

</html>

И теперь на сайте будет дата и "тикающие" часы.

Непрерывно выводите заголовок первого уровня в стиле печатной машинки. После того, как строка напечатается полностью не стирайте ее побуквенно как в примере, повторяйте вывод сначала. Измените стиль заголовка: шрифт крупнее в 2 раза, красный цвет шрифта, курсив.

Содержание