Скрипт "Дата и время"

Уважаемые подписчики!

Представляю Вашему вниманию двадцать шестой выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске мы продолжим серию уроков, посвященных JavaScript.

Новости наших проектов.
Обновление на сайте Бесплатное ПО: InfraRecorder 0.46.1 - запись CD/DVD дисков (установочная и портативная версии), doPDF 6.1.280 - виртуальный PDF принтер, 7-ZIP 4.57 - архиватор, CuneiForm 12 - программа оптического распознавания текста, Dr.Web CureIt! - антивирусная утилита
Последние темы на форуме:

В этом выпуске мы закрепим знания на основе скрипта "Дата и время" и изучим работу с объектом 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;

И выводим в шаблон ?? InputDate.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 документе ставите именованный контейнер ??, прописываете в скрипте соответствующий объект

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

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

InputVar1.innerHTML = outString;

Попробуйте собрать этот пример. Если что-то не получается, посмотрите полный текст скрипта и пример выполнения на странице: Дата и время (пример использования объекта Date).