Объект Date позволяет работать как со временем, так и с датой. Например, можно легко определить, сколько дней еще остается до следующего рождества, или внести в HTML-документ запись текущего времени.
Рассмотрим семь основных методов объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект и его придется создавать самим, например, так:
today= new Date()
Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date мы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно ту дату и время, когда данная команда была выполнена.
Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date(), который при создании нового объекта Date вызывается через оператор new):
today= new Date(1997, 0, 1, 17, 35, 23)
При этом будет создан объект Date, в котором будет зафиксировано первое января 1997 года 17:35 и 23 секунд. Таким образом, можно выбрать дату и время по следующему шаблону:
Date(year, month, day, hours, minutes, seconds)
Заметем, что для обозначения января нужно использовать число 0. Число 1 будет обозначать февраль, ну и так далее.
Итак, давайте начнем с примера, который отмечает точную дату и время прибытия пользователя на страницу. Пример 26
Сперва мы должны создать новый объект Date:
Now = new Date();
Теперь имеется объект Now, на который можно воздействовать перечисленными выше методами. Необходимо понимать, что указные выше методы – это методы объекта Date, но применяются они только к конкретному экземпляру объекта Date. Так, например, следующая строка будет ошибочной:
Year=Date. getFullYear();
Верной будет следующая строка:
Now.getFullYear()
Вернёмся к примеру.
Сначала нужно напечатать на странице текущий год. Это позволит сделать метод getFullYear() объекта Date. Этот метод не принимает никаких параметров и возвращает число, которое является номером текущего года, например 2006:
…
document.write(" Текущий год "+ Now.getFullYear()+"<br>");
…
В этой строке, с помощью метода write объекта document на страницу выводится фраза «Текущий год» а затем метод getFullYear() ранее созданного объекта с именем Now (экземпляр класса Date), вернул номер текущего года. В конце добавляем тег <br> для того, чтобы следующий текст начинался с новой строки.
Теперь нам нужно напечатать месяц на странице – для этого надо использовать метод getMonth(). Этот метод не принимает никаких параметров и возвращает номер текущего месяца, начиная с 0. Например, если текущий месяц август, то метод getMonth() вернёт значение 7. Таким образом, вывести текущий месяц можно следующим образом:
…
document.write("Текущий месяц "+ Now.getMonth()+ “<br>”);
…
Для вывода числа используется метод getDate():
…
document.write("Сегодня " + Now.getDate()+" число <br>");
…
Теперь выведем время (час, минуты и секунды) когда пользователь вошёл на страницу:
…
document.write("Вы зашли на мою страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")
…
Как видно здесь используются методы getHours() (возвращает текущий час), getMinutes() (возвращает минуты) и getSeconds() (возвращает секунды).
Рассмотрим пример создания часов в документе (пример 27).
Текущее время и дата будут отображаться в поле для ввода текста. Создадим эти поля в документе:
ДАТА:</td> <td><input type="text" value="" id="d" > <br >
ВРЕМЯ:<input type="text" value="" id="time" ><br>
Теперь создадим функцию, которая будет отображать текущее время и дату, например функцию с именем clock(). В ней прежде всего необходимо создать экземпляр объекта Date:
…
function clock()
{ now= new Date();
…
Теперь в три переменные занесём текущий час, минуту и секунду с помощью знакомых уже методов объекта Date (getHours(),getMinutes(),getSeconds()):
…
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
…
Создадим текстовую строку timeStr, которая будет содержать форматированное время в виде час: минуты: секунды. Для этого занесём в неё чистую строку и соединим её со значением текущего часа, т.е. с переменной hours:
...
timeStr= "" + hours;
...
Теперь добавим значения минут. Условимся, что количество минут отображать двумя знаками. Поэтому в случае, если количество минут меньше 10 (метод getMinutes() вернёт одну цифру) необходимо добавить впереди 0, в противном случае добавляем просто количество минут (переменная minutes). Не забываем ставить знак двоеточия между часом и минутами:
...
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
...
Осталось добавить секунды. Сделаем это по аналогии с минутами:
…
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
…
В результате timeStr содержит форматированную строку с текущим временем. Осталось её вывести в поле с именем time:
...
time.value=timeStr;
...
Перейдём к созданию строки с текущей датой. Также как и в случае со временем сначала трём переменным присвоим значения текущей даты, номера месяца и года:
…
date= now.getDate();
month= now.getMonth()+1;
year= now.getYear();
…
Теперь в некоторую переменную (например в dateStr) поместим форматированную строку с датой, месяцем и годом (заметим, что в случае с датой в качестве разделителя лучше использовать знак / (21/01/2006)):
…
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
…
Осталось строку из переменной dateStr вывести в поле для ввода текста с именем d:
...
d.value=dateStr;
...
Так как значении секунд меняется каждую секунду, то обновлять содержимое полей времени и даты необходимо каждую секунду (т.е. каждые 1000 миллисекунд). Для обновления времени достаточно вызвать функцию clock(),поэтому установим таймер, который будет вызвать функцию clock() каждые 1000 миллисекунд:
…
setTimeout("clock()",1000);
…
Осталось вызвать функцию clock(). Вызовем её при загрузке документа т.е. при наступления события onLoad (тег body):
...
<body onLoad="clock()">
</body >