世界時計を作る
このページでは世界各地の時刻を表示できる世界時計を作ってみたいと思います。 本当は世界地図を用意してクリックした地点の時刻を表示できればいいですが、 大変大掛かりになるのでやめます。今回は3箇所だけ表示できるようにしてみましょう。
世界時計のスクリプト
世界時計を作るには、日本時間を求めて、時差分だけ時刻を加減すればよさそうですが、 そう簡単にはいきません。例えば日本で午前7時だと、イギリスやアメリカでは前日の日付になります。 ということで、以下の方法を取ります。
- 日本の現在の時刻を数値として取得します。
- 時差分を加減します。
- 時差補正した数値を日付データにします。
- 日付と時刻を取得して表示します。
まずはHTMLのBODY内に以下のフォームを記入してください。 BODYタグにはonloadイベントを記入し、 時計を表示する関数を呼び出せるようにしておきます。 oputionタグのvalue値には日本との時差（単位は時間）を設定します。
<body onload="SekaiTokei()"> <form name="Wclock"> <select name="city"> <option value="0">東京・ソウル</option> <option value="1">グラム・フィジー・シドニー</option> <option value="-19";>ハワイ</option> </select> <br> <input type="text" name="Time" value="" size="30"> </form>
次にJavaScript部分です。HTMLのヘッダーに記入してみましょう。
<script type="text/javascript">
<!--
function SekaiTokei()
{
setInterval("TimeSet()",1000);
}
function TimeSet()
{
//optionタグのvalue値に設定した時差を取得する
var num = document.Wclock.city.selectedIndex;
var Jisa = parseInt(document.Wclock.city.options[num].value);
//日本の現在の日付データを求め数値にする
var Japan= (new Date()).getTime();
//時差を加減して、日付データに戻す
var Jikan=new Date(Japan+Jisa*60*60*1000);
//日付と時刻を求める
var Year = Jikan.getFullYear();
var Month= Jikan.getMonth()+1;
var Day = Jikan.getDate();
var Hour = Jikan.getHours();
var Minu = Jikan.getMinutes();
var Sec = Jikan.getSeconds();
//時間表示の修正（10秒未満は前に0を付ける）
if (Hour < 10) Hour="0"+Hour;
if (Minu < 10) Minu="0"+Minu;
if (Sec < 10) Sec ="0"+Sec;
//日付と時刻を表示する
var DATE = Year+"年"+Month+"月"+Day+"日";
var TIME = Hour+":"+Minu+":"+Sec;
document.Wclock.Time.value = DATE+" "+TIME;
}
// -->
</script>
サンプル
スクリプトの説明
では、上記スクリプトについて詳しく見ていきましょう。
1秒毎に時刻を表示する
Bodyタグ内のonloadイベントで呼び出される関数SekaiTokei()ですが、 setInterval()を使って時刻を表示する関数TimeSet()を1000ミリ秒毎に呼び出しています。
optionタグのvalue値を取得する
続いて関数TimeSet()を見ていきます。最初に optionタグのvalue値に記入した、日本との時差（単位は時間）を取得します。 現在選択されているoptionタグの番号をselectedIndexで取得し、 変数numに代入します。 そして選択された都市のvalue値を求めます。 これは文字列なので、parseInt()を使って数値に変換し、変数Jisaに代入します。
日本の現在の時刻を数値として求める
次に、日本の現在の時刻を求めます。 new Date()で日付データが得られますが、それを数値として取得するため、 getTime()を用います。得られる数値の単位はミリ秒になります。
- 日付データ.getTime()
- 1970年1月1日0時からのミリ秒を取得する
時差を加減して、日付データに戻す
得られた現在時刻を表す数値に、時差を加えます。 この時差の単位は時間（hour）でしたから、ミリ秒に換算しています。
続いて、得られた数値をダイレクトにnew Date()の括弧内に記入しました。 1970年1月1日0時から経過したミリ秒を、括弧内に記入することができます。 これで時差の分だけずれた日付データになります。それを変数Jikanに代入しました。
あとは日付データJikanから日付と時刻を取得します。
時間表示を修正して表示
時間、分、秒が1桁の場合に前に「0」を付けて表示するようにしています。 if文で各要素が10未満か調べて、当てはまる時に、前に「0」を付け足します。
日付や月の前にも「0」を付けたいならば、同様にして付けることが可能です。
最後にフォームのテキストボックスに、日付と時刻を書き出しています。
さて、今回は日本にいる人限定の世界時計を作ってみました。 しかし別の時間帯の地域に住んでおられる方や、 現在の時刻を日本以外にしている人にはこの方法では駄目です。 それで次のページでは、標準時との時差を基準にして世界時計を作る方法について考えてみます。