Дата и время (пример использования объекта Date)

Данный сценарий позволяет выводить обновляемую в реальном времени дату и время, а так же описана настройка шаблона для внедрения результатов работы скрипта в любое место страницы.

Описание работы скрипта

Основа скрипта - указание отложенной обработки кода с помощью метода window.setTimeout('UpdateTime()',1000). Запись исходного объекта window можно опустить в случае, если работа идет в текущем окне. Метод запускается по событию onLoad помещенного в тег body. Напомним, что это событие возникает после загрузки HTML документа. Метод setTimeout имеет два аргумента: первый - это функция JavaScript или код JavaScript, а второй - это время в миллисекундах задающая паузу для запуска первого аргумента (в нашем примере задан промежуток в 1 секунду).

В HTML документе, места для подстановки результатов выполнения скрипта, определяются с помощью именованных элементов span. С помощью имен заданных в свойстве name мы имеем доступ к управлению этими элементами с помощью скрипта. Первоначально span не делает ничего, кроме отображения своего содержимого, т.е. после загрузки страницы вы увидим следующее

Текущее время ?? и сегодня ??.

Вопросительные знаки - это содержимое тега span - мы можем поставить туда любой текст на выбор. Этот текст будет сохраняться в браузерах с отключенной поддержкой JavaScript.

Теперь перейдем к скрипту. При загрузки страницы идет инициализация глабальных массивов с русскими названиями дней недели (начиная с воскресенья) и месяцев.

var week =
Array("воскресенье","понедельник","вторник","среда",
	"четверг","пятница","суббота");
var month = Array("января","февраля","марта","апреля","мая","июня",
	"июля","августа","сентября","октября","ноября","декабря");

После идет функция UpdateTime(). Вначале создается объект содержащий информацию о текущем времени:

var CurrentTime = new Date();

Далее мы описываем два объекта описывающие доступ к именованным элементам span (изменения этих объектов будут приводит к изменениям в содержимом HTML документа):

var InputTime = document.getElementById('MyTime');
var InputDate = document.getElementById('MyDate');

Получаем значение часов:

h = CurrentTime.getHours();

Для более эстетичного отображения если час меньше, чем 10, то добавляем в начале ноль (напрмер, 9 меняем на 09). То же самое делаем для минут и секунд. Составляем время в формате ЧЧ:ММ:СС:

outString = h + ":" + m + ":" + s;

И выводим в шаблон <span id="MyTime">??</spangt; с помощью

InputTime.innerHTML = outString;

При этом у нас содержимое контейнера span меняется с ?? на текущее время ЧЧ:ММ:СС. Переходим к дате. День месяца определяеся с помощью метода getDate(). Номер месяца задается методом getMonth(). Значения месяца от 0 до 11 используются как индекс массива и именами месяцев month. День недели от воскресенья до понедельника задаются значениями от 0 до 6 методом getDay(), а имена дней недели извлекаются из мессива week. После заменяется содержимое контейнера значением даты:

InputDate.innerHTML = outString;

В последней строке задается команда выполнить тот же код (но уже для новой даты) через секунду:

setTimeout("UpdateTime()",1000);

Примечание 1. Отметим, что в теге body мы могли бы использовать метод, позволяющий выполнять заданный код через определенный интервал времени setInterval:

При этом, мы должны удалить последнюю строку скрипта (т.к. периодическое выполнение уже определено): setTimeout("UpdateTime()",1000);.

К сожалению последний вариант (с setInterval) не поддерживается старыми браузерами (например, InternetExplorer 4), а первый вариант (с setTimeout) выполняется практически в любом браузере.

Примечание 2. На основе данного примера вы можете составлять собственные скрипты по подходящие для вашей страницы цели. Просто в месте отображения данных в HTML документе ставите именованный контейнер <span id="MyVar1">??</span>, прописываете в скрипте соответствующий объект

var InputVar1 = document.getElementById('MyVar1');

а дальше изменяете содержимое контейнера содержимым переменной outString (или другим значением):

InputVar1.innerHTML = outString;

Полный код скрипта "Дата и время"

Скопируйте приведенный ниже скрипт в отдельный HTML файл (например, date_and_time.html) и откройте страницу в браузере.

<html>
<head>
<title>Дата и время (пример использования объекта Date)</title>

<script>

var week = Array("воскресенье","понедельник","вторник","среда",
	"четверг","пятница","суббота");
var month = Array("января","февраля","марта","апреля","мая","июня",
	"июля","августа","сентября","октября","ноября","декабря");

function UpdateTime() {
var CurrentTime = new Date();
var InputTime = document.getElementById('MyTime');
var InputDate = document.getElementById('MyDate');
	h = CurrentTime.getHours();
	if ( h < 10 ) h = "0" + h;
	m = CurrentTime.getMinutes();
	if ( m < 10 ) m = "0" + m;
	s = CurrentTime.getSeconds();
	if ( s < 10 ) s = "0" + s;
	outString = h + ":" + m + ":" + s;
	InputTime.innerHTML = outString;
	outString = CurrentTime.getDate() + " ";
	outString += month[CurrentTime.getMonth()] + " ";
	outString += CurrentTime.getFullYear() + " года";
	outString += " (" + week[CurrentTime.getDay()] + ")";
	InputDate.innerHTML = outString;
	setTimeout("UpdateTime()",1000);
}
-->
</script>

</head>

<body onLoad="setTimeout('UpdateTime()',1000);">

<p>Сегодня <span id="MyDate">??</span> и текущее время <span id="MyTime">??</span>.</p>

</body>
</html>

Дата и время (пример использования объекта Date)

Описание работы скрипта

Полный код скрипта "Дата и время"

Пример выполнения скрипта