3 РАБОТА С ФОРМАМИ

Сценарии JavaScript в активных страницах Web

Электронные часы

С помощью сценария JavaScript и формы вы можете сделать достаточно сложные электронные часы, которые будут показывать не только время, но и дату в различных форматах с учетом смещения часового пояса (рис. 3.20).

Рис. 3.20. Электронные часы в документе HTML

Исходный текст документа HTML с электронными часами представлен в листинге 3.10.

Листинг 3.10. Файл chapter3/clock/clock.html


<HTML>
  <HEAD>
    <TITLE>Электронные часы</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

    nTimer = 0;
    var szCurrentTime = "";
    var szCurrentDate = "";
    var szTimeZone = "";
    var szGMT = "";
    var szLocal = "";

    function updateClock()
    {
      var dtDate   = new Date();        
      var nHours   = dtDate.getHours();
      var nMinutes = dtDate.getMinutes();        
      var nSeconds = dtDate.getSeconds();

      szCurrentTime = nHours + ":" + nMinutes + 
        ":" + nSeconds;
   
      szCurrentDate = dtDate.getDate() + "." + 
        dtDate.getMonth() + "." + dtDate.getYear();

      szTimeZone = dtDate.getTimezoneOffset() / 60;

      szGMT = dtDate.toGMTString();

      szLocal = dtDate.toLocaleString();

      Clock.time.value = szCurrentTime;
      Clock.dat.value  = szCurrentDate;
      Clock.timeZone.value = szTimeZone;
      Clock.gmt.value  = szGMT;
      Clock.loc.value  = szLocal;

      nTimer = setTimeout("updateClock()", 1000);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Электронные часы</H1>

    <FORM NAME="Clock">
      <TABLE>
       <TR><TD><B>Дата:</B></TD><TD><INPUT TYPE="text" 
         NAME="dat" SIZE="20" ></TD>
       </TR>
       <TR><TD><B>Время:</B></TD><TD><INPUT TYPE="text" 
         NAME="time" SIZE="20" ></TD>
       </TR>
       <TR><TD><B>Смещение часового пояса:</B></TD><TD><INPUT TYPE="text" 
         NAME="timeZone" SIZE="20" ></TD>
       </TR>
       <TR><TD><B>Дата GMT:</B></TD><TD><INPUT TYPE="text" 
         NAME="gmt" SIZE="30" ></TD>
       </TR>
       <TR><TD><B>Локальная дата:</B></TD><TD><INPUT TYPE="text" 
         NAME="loc" SIZE="30" ></TD>
       </TR>
      </TABLE>
    </FORM>

    <SCRIPT LANGUAGE="JavaScript">
    <!--
      updateClock();
    // -->
    </SCRIPT>

  </BODY>
</HTML>

Часы запускаются сразу после загрузки документа HTML в окно браузера. При этом управление получает функция updateClock. Эта функция определена в заголовке, а ее вызов находится в конце области тела документа HTML.

Получив управление, функция updateClock создает объект Data для текущей даты, установленной в компьютере:


var dtDate   = new Date();

Затем функция определяет три компоненты времени (часы, минуты и секунды), вызывая для этого методы getHours, getMinutes и getSeconds, определенные в классе Date:


var nHours   = dtDate.getHours();
var nMinutes = dtDate.getMinutes();        
var nSeconds = dtDate.getSeconds();

Полученные таким образом значения комбинируются в текстовой строке szCurrentTime:


szCurrentTime = nHours + ":" + nMinutes + 
        ":" + nSeconds;

В дальнейшем время будет записано функцией updateClock в поле time формы Clock, как это показано ниже:


Clock.time.value = szCurrentTime;

Строка текущей даты получается в результате вызова методов getDate, getMonth и getYear:


szCurrentDate = dtDate.getDate() + "." + 
        dtDate.getMonth() + "." + dtDate.getYear();

Эта строка записывается в поле dat формы Clock:


Clock.dat.value  = szCurrentDate;

Для вычисления смещения часового пояса мы воспользовались методом getTimezoneOffset, возвращающим значение в минутах:


szTimeZone = dtDate.getTimezoneOffset() / 60;

Для того чтобы вычислить смещение в часах, мы разделили результат, полученный от метода getTimezoneOffset, на 60.

Вычисленное смещение часового пояса записывается в поле timeZone формы Clock:


Clock.timeZone.value = szTimeZone;

Для получения времени по Гринвичу мы воспользовались методом toGMTString:


szGMT = dtDate.toGMTString();

Полученное значение будет записано в поле gmt формы Clock:


Clock.gmt.value  = szGMT;

И, наконец, локальную дату и время мы определяем с помощью метода toLocaleString:


szLocal = dtDate.toLocaleString();

Результат записывается в поле loc формы Clock:


Clock.loc.value  = szLocal;

Периодическое выполнение функции updateClock достигается с помощью метода setTimeout:


nTimer = setTimeout("updateClock()", 1000);

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