Eske&Fam | JavaScript. Возвращение даты и времени

Просящему у тебя дай и от хотящего занять у тебя не отвращайся. /Евангелие от Матфея/

Анонсы:

=== Дата: 05/12/2011 Автор: О. Н. Рева ===

JavaScript. Возвращение даты и времени

Если в работе вы хотите использовать текущую дату и время не только для показа на Web-странице, но и для расчетов в сценариях, познакомьтесь с объектом Date. Этот объект позволяет:

возвращать системную дату и время;
отображать дату и время в разных форматах;
производить вычисления с датой и временем.

Отображение системного времени

Объект Date создается следующей строкой кода:

var today = new Date();

В переменную today заносится дата и время, извлеченные из системного таймера компьютера в момент выполнения строки кода сценария. Но в сценарии можно создать объект Date с информацией о любой произвольной дате, как в следующих примерах:

var today = new Date("November 5th, 2005, 14:30:00");
var today = new Date("2005, 10, 5, 14, 20, 0");

Обратите внимание на то, что дата может вводиться как строка текста и как набор числовых значений. Данные времени (часы, минуты и секунды) в обоих случаях можно не указывать.

Объект Date по умолчанию возвращает строку текста. Чтобы убедиться в этом, введите в код сценария такую строку:

alert(new Date());

Текущее системное время отобразится в окне сообщения.

Формат данных о текущей дате и времени

От обычной строки текста объект Date отличается тем, что у него есть набор методов, которые позволяют извлекать составляющие элементы текущей даты:

getYear() - год;
getMonth() - месяц;
getDay() - день недели;
getDate() - число месяца;
getHours() - часы;
getMinutes() - минуты;
getSeconds() - секунды.

Выполнение всех этих методов в той последовательности, как они перечислены в списке показано на рисунке. (На экран текст выводился с помощью метода write, например: document.write("Год: "+today.getYear(),"<BR>");.)

Данные показанные на рисунке были получены 5 декабря 2011 года (понедельник) в 09:27:12. Вас не удивило несоответствие с некоторыми датами на рисунке выше? На экране был выведен 11-й месяц. Это не ошибка компьютера. Просто компьютер считает месяцы с нуля, т. е. для января номер месяца будет 0. точно так же с нулевой отметки ведется отсчет дней недели. Понедельник был выведен под номером 1 по той причине, что первым днем у англичан считается воскресенье.

Если вы хотите отобразить на странице текущий день недели или месяц словами, вам придется немножко потрудиться и создать два массива, как в листинге ниже.

Листинг. Преобразование даты в слова
<body> <p name='clock' id='clock' align='center'></p> <script> days = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота");
months = new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
today = new Date();
clock.innerHTML = today.getHours() + ((today.getHours()<10) ? "0:" : ":") + ((today.getMinutes()<10) ? "0" : "") + today.getMinutes() + "<BR>";
clock.innerHTML += (days[today.getDay()] + "<BR>");
clock.innerHTML += (today.getDate() + " " + months[today.getMonth()] + " " + today.getYear());
</script>
</body>

Результат выполнения сценария показан ниже на рисунке

Часы на Web-странице

Вы научились извлекать системное время компьютера и показывать его на экране. Этим можно воспользоваться для отображения на Web-странице даты и времени ее открытия, если такая информация важна для понимания содержимого Web-страницы. Но показанное время будет статичным. Если вы хотите показать на странице виртуальные часы, то необходимо написать сценарий для регулярного обновления строки на экране.

Имея понятие о функциях, бесконечных циклах и таймере задержки выполнения функции, вы без труда выполните эту задачу.

1.В коде HTML Web-страницы создайте пустой именованный абзац, например: <P NAME='clock' id='clock'></P>>. Поместите абзац в той части страницы, где должны отображаться часы.

2.Пишем пользовательскую функцию с именем show_clock():
function show_clock() {
    days = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота");
    months = new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
    today = new Date();
    clock.innerHTML = today.getHours() + ((today.getHours()<10) ? "0:" : ":") + ((today.getMinutes()<10) ? "0" : "") + today.getMinutes() + "<BR>";
    clock.innerHTML += (days[today.getDay()] + "<BR>");
    clock.innerHTML += (today.getDate() + " " + months[today.getMonth()] + " " + today.getYear());
setTimeout("show_clock(),60000");
}

3.В конце основного раздела Web-страницы (где-нибудь между дескрипторами <BODY></BODY>, но после дескрипторов абзаца, в котором будут выводиться часы) добавьте вызов функции show_clock().

4.После загрузки Web-страницы на ней отобразятся часы, у которых время будет обновляться каждую минуту.

Пример:

Вычисление даты и времени

Несмотря на то что объект Date по умолчанию возвращает строку текста, данные в нем хранятся в другом формате — целое число, представляющее количество миллисекунд, прошедших от базовой даты, - полуночи 1 января 1970 года. Это число называется примитивным значением объекта Date. Для его возвращения используется метод valueOf().

Возможность получить текущую дату одним числом позволяет производить вычисления времени между событиями.

Для примера давайте слегка преобразуем код функции show_clock.

Листинг. Определение времени между двумя вызовами функции
<html>
<head>
<script>
function show_clock(last_time) {
    days = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота");
    months = new Array("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
    today = new Date();
    clock.innerHTML = today.getHours() + ((today.getHours()<10) ? "0:" : ":") + ((today.getMinutes()<10) ? "0" : "") + today.getMinutes() + "<BR>";
    clock.innerHTML += (days[today.getDay()] + "<BR>");
    clock.innerHTML += (today.getDate() + " " + months[today.getMonth()] + " " + today.getYear());
    alert(today.valueOf() - last_time.valueOf());
    setTimeout("show_clock(today),60000");
}
</script>
</head>
<body>
<p name='clock' id='clock' align='center'></p>
<script>
show_clock(new Date());
</script>
</body>
</html>

Были внесены следующие изменения. В определение функции show_clock добавлен аргумент last_time, принимающий объект Date. Код функции остался таким же, как в листинге выше, за исключением двух последних строк. В предпоследней строке сравниваются примитивные значения объекта Date, переданного с аргументом, и переменной today, созданной в теле функции. Результат выводится в стандартном окне сообщения. Затем выполняется вызов этой же функции show_clock с задержкой в 60 с и с передачей переменной today в качестве аргумента. Мы можем ожидать, что окно сообщения покажет нам интервал между вызовами функции в 60 000 миллисекунд. В действительности интервал будет больше, поскольку какое-то время будет затрачено на выполнение самой функции.

Мы можем воспользоваться этим подходом, чтобы разместить на персональной Web-странице напоминание о том, сколько дней осталось до какого-нибудь знаменательного события: Нового года, дня рождения, очередного чемпионата мира по футболу и т. п. Но чтобы текст напоминания был понятен, значение в миллисекундах нужно преобразовать в дни, часы или минуты. Для этого полученное значение нужно разделить на число миллисекунд в желаемой единице времени:

сутки — 86 400 000 мс;
час — 360 000 мс;
минута — 60 000 мс;
секунда — 1000 мс.

Рассмотрим пример в нижеследующем листинге.

Листинг. Определение числа дней до знаменательной даты
<html>
<head>
<title>Скоро Новый год</title>
</head>
<body>
<SCRIPT>
var NewYear = new Date(2012,1,1,0,0,0);
var today = new Date();
var day_left = Math.ceil((NewYear.valueOf() - today.valueOf())/86400000);
if (day_left == 1)
document.write("<H1> До Нового года остался 1 день!!!</H1>");
else
document.write("<H1>До Нового года осталось ", day_left, (day_left<5 ? " дня" : " дней"), "!!!</H1>");
</SCRIPT>
</body>
</html>

Сценарий Web-страницы очень простой. Создается объект Date с датой Нового года. Затем возвращается текущая дата. Находим разницу между примитивными значениями этих переменных, делим полученное значение на число миллисекунд в сутках и округляем до ближайшего целого числа методом Math.ceil. Текст заголовка выбирается с помощью конструкции операторов if-else и с помощью условного оператора. Результат показан ниже.

<<назад

Погода в Рудне
^{(Волгоградcкая обл.)}

Подробнее >>

Курс валют
на 10 Дек 2024 г.
704 - Вьетнамских донгов
- 1