世界時計を作る－JavaScript入門

HOME
JavaScript入門
世界時計を作る

このページでは世界各地の時刻を表示できる世界時計を作ってみたいと思います。本当は世界地図を用意してクリックした地点の時刻を表示できればいいですが、大変大掛かりになるのでやめます。今回は3箇所だけ表示できるようにしてみましょう。

（このページで解説しているのは、日本にいる場合のみ使える世界時計です）

（実際にはサマータイム等が存在するので、日付を取得して振り分けるなど複雑な処理をしなければ正確な世界時計は作れません）

世界時計のスクリプト

世界時計を作るには、日本時間を求めて、時差分だけ時刻を加減すればよさそうですが、そう簡単にはいきません。例えば日本で午前7時だと、イギリスやアメリカでは前日の日付になります。ということで、以下の方法を取ります。

日本の現在の時刻を数値として取得します。
時差分を加減します。
時差補正した数値を日付データにします。
日付と時刻を取得して表示します。

まずはHTMLのBODY内に以下のフォームを記入してください。 BODYタグにはonloadイベントを記入し、時計を表示する関数を呼び出せるようにしておきます。 oputionタグのvalue値には日本との時差（単位は時間）を設定します。

<body onload="sekaiTokei()">

<form name="wrdClock">
<select name="city">
<option value="0">東京・ソウル</option>
<option value="1">グラム・フィジー・シドニー</option>
<option value="-19";>ハワイ</option>
</select>
<br>
<input type="text" name="wrdTime" value="" size="30">
</form>

次にJavaScript部分です。HTMLのヘッダーに記入してみましょう。

<script>

// 1. 1秒毎に時刻を表示する
function sekaiTokei()
{
  setInterval("timeSet()",1000);
}

function timeSet()
{

  // 2.optionタグのvalue値に設定した時差を取得する
  var num = document.wrdClock.city.selectedIndex;
  var jisa = parseInt(document.wrdClock.city.options[num].value);

  // 3.日本の現在の日付データを求め数値にする
  var japan= (new Date()).getTime();
  
  // 4.時差を加減して、日付データに戻す
  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();

  // 5.時間表示の修正（10未満は前に0を付ける）
  if (hour < 10) hour="0"+hour;
  if (minu < 10) minu="0"+minu;
  if (sec  < 10) sec ="0"+sec;

  //日付と時刻を表示する
  var wDate = year+"年"+month+"月"+day+"日";
  var wTime = hour+":"+minu+":"+sec;
  document.wrdClock.wrdTime.value = wDate+" "+wTime;

}
</script>

サンプル

スクリプトの説明

では、上記スクリプトについて詳しく見ていきましょう。

1. 1秒毎に時刻を表示する

Bodyタグ内のonloadイベントで呼び出される関数sekaiTokei()ですが、 setInterval()を使って時刻を表示する関数timeSet()を1000ミリ秒毎に呼び出しています。

2.optionタグのvalue値を取得する

続いて関数timeSet()を見ていきます。最初に optionタグのvalue値に記入した、日本との時差（単位は時間）を取得します。現在選択されているoptionタグの番号をselectedIndexで取得し、変数numに代入します。そして選択された都市のvalue値を求めます。これは文字列なので、parseInt()を使って数値に変換し、変数jisaに代入します。