標準時との時差を求めて世界時計を作る方法について解説

HOME
更新日:2017.03.02
HOMEJavaScript入門 > 標準時との時差を求める

標準時との時差を求める

前のページでは日本時間と他の地域の時差から世界時計を作りましたが、 日本以外の国からアクセスした人は正しく時間を表示できませんでした。 それで今度はアクセスしてきたポイントと標準時との時差を測定して、 そこから世界時計を作ってみます。

標準時との時差を求める方法

グリニッジ標準時との時差を求めるには、getTimezoneOffset()を使います。

日付データ.getTimezoneOffset()
グリニッジ標準時との時差を求める。単位は分(minute)。

日付データの部分は、現在の日付時刻をnew Date()で求めればOKです。 日本であれば9時間(540分)の時差があるので、540となりそうですが、 実際は-540となります。 「標準時は日本時間より540分前になる」ということです。

具体的には下のように使います。

<script>

var jisa = (new Date()).getTimezoneOffset();

document.write("標準時との時差は、"+jisa/60+"時間です!");

</script>

上記サンプルの結果 =

標準時の時差から世界時計を作る

では標準時との時差を求めて補正をする方式で、世界時計を作ってみたいと思います。 基本的には前のページのコードを利用します。 HTMLのBody内に以下のフォームを記入してください。 前のページと違うのは、 optionタグのvalue値に指定する数値が標準時との時差に変わっている点だけです。 onloadイベントも忘れずに書いておきましょう。

<body onload="sekaiTokei()">

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

次にJavaScriptを記入します。以下のスクリプトを記入してみてください。 HTMLのヘッダーが良いでしょう。

<script>

function sekaiTokei()
{
  setInterval("timeSet()",1000);
}

function timeSet()
{

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

  //アクセスしたPCの日付データを求め数値にする
  var here= (new Date()).getTime();
  
  //グリニッジ標準時を求める
  var gmt = here + (new Date()).getTimezoneOffset()*60*1000;
  
  //時差を加減して、日付データに戻す
  var jikan=new Date(gmt+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 wDate = year+"年"+month+"月"+day+"日";
  var wTime = hour+":"+minu+":"+sec;
  document.wrdClock.wrdTime.value = wDate+" "+wTime;

}

</script>

サンプル


グリニッジ標準時を求めてから時差計算

前のページと大きく変わったのは、赤文字で示した部分です。 その一つ前の行で、アクセスしているPCの現在時刻を求めて数値として変数hereに代入しています。

次に、グリニッジ標準時の数値データを計算します。数値データを代入するために変数gmtを宣言し、 getTimezoneOffset()で求めた標準時との時差(分をミリ秒に換算)を、 現在時刻の変数hereに加えています。

あとは、変数gmtとoptionタグのvalue値で設定した標準時との時差を加えた値から、 日付データjikanを作成しています。