Электронные часы
С помощью сценария 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);
Здесь мы указали, что период обновления показаний наших часов должен быть равен одной секунде.
