JavaScript для мага

       

Объект Date


В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Есть еще несколько таких же объектов - полное описание см. в документации, предоставляемой  фирмой Netscape.

Для начала давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени.

Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new:

today= new Date()

Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date Вы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.

Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее. Полное описание объекта Date и его методов Вы сможете найти в документации по JavaScript, предоставляемой фирмой Netscapes.

Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду.

Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод 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, как Вы вероятно думали. Число 1 будет обозначать февраль, ну и так далее.

Теперь мы напишем скрипт, печатающий текущие дату и время. Результат будет выглядеть следующим образом:

Time: 17:53

Date: 4/3/2010

Сам же код выглядит следующим образом:

<script language="JavaScript">

<!-- hide

now= new Date();

document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>");

document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" +

                (1900 + now.getYear()));

// -->

</script>

Здесь мы пользуемся такими методами, как getHours(), чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Можно видеть, что мы добавляем к записи года еще число 1900. Дело в том, что метод getYear()

указывает количество лет, прошедших после 1900 года. А стало быть, если сейчас 1997 год, то будет выдано значение 97, а если 2010 год - то 110, а не 10! Если мы так и будем всякий раз добавлять 1900, то у нас не будет проблемы 2000 года. Помните также, что мы обязаны увеличивать на единицу значение, получаемое от метода getMonth().

В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03. Решение этой проблемы мы рассмотрим в следующем примере.

Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:

<html>

<head>

<script Language="JavaScript">

<!-- hide

var timeStr, dateStr;

function clock() {

        now= new Date();

        // врем\я

        hours= now.getHours();



        minutes= now.getMinutes();

        seconds= now.getSeconds();

        timeStr= "" + hours;

        timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;

        timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;

        document.clock.time.value = timeStr;

        // дата

        date= now.getDate();

        month= now.getMonth()+1;

        year= now.getYear();

        dateStr= "" + month;

        dateStr+= ((date < 10) ? "/0" : "/") + date;

        dateStr+= "/" + year;

        document.clock.date.value = dateStr;

        Timer= setTimeout("clock()",1000);

}

// -->

</script>

</head>

<body onLoad="clock()">

<form name="clock">

  Время:

  <input type="text" name="time" size="8"  value=""><br>

  Дата:

  <input type="text" name="date" size="8" value="">

</form>

</body>

</html>

(online- версия руководства позволит Вам проверить этот скрипт немедленно)

Здесь для ежесекундной коррекции времени и даты мы пользуемся методом setTimeout(). Фактически это сводится к кому, что мы каждую секунду создаем новый объект Date, занося туда текущее время. Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг <body>. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr.

Как мы уже упомянули ранее, существует проблема с индикацией, когда количество минут меньше 10 - в данном скрипте эта проблема решается с помощью следующей строки:

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;

Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Для Вас эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:

if (minutes < 10) timeStr+= ":0" + minutes

  else timeStr+= ":" + minutes;


Содержание раздела