世界時計

Dateオブジェクトの勉強がてら世界時計を作ってみました。
(サマータイムは非対応です)

<FORM METHOD="post">
現在の世界の時刻です。
<BLOCKQUOTE>
<TABLE>
<TR><TD>オークランド(NZ)<TD><INPUT NAME="nz" SIZE=8>
<TR><TD>ロンドン<TD><INPUT NAME="london" SIZE=8>
<TR><TD>東京<TD><INPUT NAME="tokyo" SIZE=8>
</TABLE>
</BLOCKQUOTE>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
tz_nz = 13 * 60; // ニュージーランドの夏時間はGMT+13
tz_uk = 0; // イギリスはGMTですね。 
tz_jp = 9 * 60; // GMT+9

var nz, uk, jp; // 時刻文字列を入れるところ  

function update_watch() {
	now = new Date();
	nz = nowat(now, tz_nz)
	uk = nowat(now, tz_uk)
	jp = nowat(now, tz_jp)

	document.forms[0].elements[0].value = nz
	document.forms[0].elements[1].value = uk
	document.forms[0].elements[2].value = jp

	setTimeout('update_watch()', 999); // 1000msec = 1sec
}

function nowat(now, tz) {
	var hour, min, sec;
	var t = new Date();
	t.setTime(now.getTime() + (now.getTimezoneOffset() + tz) * 60 * 1000);
	hour = t.getHours();
	min = t.getMinutes();
	sec = t.getSeconds();
	if (hour < 10) {
		hour = "0" + hour;
	}
	if (min < 10) {
		min = "0" + min;
	}
	if (sec < 10) {
		sec = "0" + sec;
	}
	return hour + ":" + min + ":" + sec; 
}
update_watch();
</SCRIPT>

JavaScriptで時刻はDate()オブジェクトで扱います。getHours()、getMinutes() などはクライアント側のタイムゾーンの時刻を返します。つまり、東京でこのページを見れば東京の時刻で返されます。

クライアントのタイムゾーンはgetTimezoneOffset()メソッドで得ることができ、分単位で返されます。東京なら-540(つまり-9時間)が返ってきます。

時刻の演算はそのままやろうとすると大変なのでブラウザの内部で使われている形式に直してから行います。ブラウザ内部では1970年1月1日から何ミリ秒経過しているかで表されていて、getTime()メソッドで得ることができます。

ちなみに現在の時刻は、と表されます。ですから、分単位の時差を足し算すればGMTが求まります。

now.getTime() + now.getTimezoneOffset() * 60 * 1000

60 * 1000は、分単位のものをミリ秒単位に換算するためです。あとは、表示させたい都市のタイムゾーンに合わせた足し算を行って表示するだけです。

[この世界時計はサマータイムには対応していません。新しくサマータイムに対応したバージョンを作りましたので、必要な場合はそちらを参考にしてください。]

オークランド(NZ)
ロンドン
東京