3.3.6. Електронні часи

За допомогою сценарію JavaScript і форми можна зробити достатньо складні електронні часи, що будуть показувати не тільки час, але і дату в різноманітних форматах з урахуванням зсуву годинного пояса.

Вихідний текст документа HTML з електронними часами поданий у листинге 3.10.

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

<HTML>

<HEAD>

<TITLЕ>Електронні часи</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>

<Н1>Електронні часи</Н1>

<FORM NAME="Clock">

<TABLE>

<ТR><ТD><У>Дата </B></TD><TD><INPUT TYPE="text"

NAME="dat" SIZE="20"></TD>

</TR>

<ТR><TD><У>Час </B></TD><TD><INPUT TYPE="text"

NAME="time" SIZE="20"></TD>

</TR>

<ТR><ТD><У>Зсув годинного пояса : </B></TD><TR><INPUT TYPE="text"

NAME="timeZone" SIZE="20"></TD>

</TR>

<ТR><ТD><B>Дата GMT : </B></TD><TD><INPUT TYPE="text"

NAME="gmt" SIZE="30"></TD>

</TR>

<ТR><ТD><У>Локальна дата : </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, getMinutcs і getSeconds. визначені в класі Date:

var nHours = dtDate.getHours();

var nMinutes = dtDate. getMinutes();

var nSeconds = dtGate. getSeconds();

Отримані в такий спосіб значення комбінуються в текстовому рядку szCurrеntTime:

Надалі час буде записано функцією updalеClock у поле time форми Clock, як це показано нижче:

Рядок поточної дати утворюється в результаті виклику методів getDate, getMonth і getYear:

szCurrentDate = dtDate.getDate() + "." +

dtDate. getMonth() + ". " + dtDate. getYear();

Цей рядок записується в поле dat форми Clock:

Clock. dat. value = szCurrentDate;

Для обчислення зсуву годинного пояса необхідно скористатися методом getTimezoneOffset, що повертає значення в хвилинах:

getTimeZone = 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();

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

Clock. loc. value = szLocal;

Періодичне виконання функції updateClock досягається за допомогою методу setTimeout:

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

Тут зазначено, що період відновлення показань часів повинний бути дорівнює 1 с.