Mac Clinic Tips:
JavaScriptによるホームページでの時間表示2
-世界時刻を表示する
How to Display World Time by JavaScript

作成：1996年11月21日

「JavaScriptによるホームページでの時間表示1」ではJavaScriptによる時間表示のいろいろな例を紹介しましたが、そこでも述べたように、JavaScriptが表示する時刻というのはクライアントのパソコンの内部時計の時間です。従って、当然のことながら同じホームページを海外で見ていた場合は、その国の現在時刻が表示されるわけです。
これ自体は何の不都合もありませんが、前回の例で、香港の中国への返還までのカウントダウンとなると、これは正式には中国時間の1997年7月1日午前0時ですが、スクリプトではホームページを見ている国の7月1日午前0時との時間差計算させています。中国と英国の時差は8時間ですから、ロンドンでは6月30日午後4時ということになります。
このような問題を解決するには、クライアントのいる地域の時間帯（世界標準時との時差）を認識して世界時計を作る必要があります。
しかし、残念ながら現在のJavaScriptには世界時計を表示する関数はありません。かろうじて時間帯（Time Zone）を獲得する関数がありますので、これを利用して世界時計を作ってみました。

表示の例を示します。

次にスクリプトを紹介します。
GMTとの時差を変数として指定すると、年月日時分を表示するユーザー関数を作ります。ユーザー定義関数はHTMLのHEADの部分で定義します。こうしておけば、BODYのなかにこの関数を記述するだけで世界時間を表示できます。
スクリプトの基本はクライアントのパソコンがある時間帯（ニューヨークであれば-5時間）と表示したい都市の時間帯（東京であれば+9時間）の時差を計算し、クライアントの時刻に足したり、引いたりするものです。しかし、夜中の0時を境に年、月、日にちが変わる場合があるため、全てのケースを網羅するために、全体としては非常に長いスクリプトになってしまいました。

［スクリプト］
<head>
<script language="JavaScript">
<!--// (c)Harry Ono 96.10.16. "World Time Display"
function localtime(zone){ /*zone＝指定地域のGMT時差*/; var today=new Date(); /*ユーザの時刻取得*/;

var tz=today.getTimezoneOffset()/60; /*tz＝ユーザ地域のGMT時差*/;
if(tz>=14){ /*ユーザ地域の日付変更線の前後*/;
tz=24-tz;
}
else{
tz=-tz; /*tz＝ユーザ地域の修正GMT時差*/;
}
var y=today.getYear(); /*ユーザの年取得*/;
var m=today.getMonth()+1; /*ユーザの月取得*/;
var d=today.getDate(); /*ユーザの日取得*/;
var h=today.getHours(); /*ユーザの時間取得*/;
var mi=today.getMinutes(); /*ユーザの分取得*/;
var hl=h+zone-tz; /*hl＝ユーザの時刻取得*/;

if(hl>=0){ /*その日のうちの場合*/;
}
if(hl<0){ /*前日の場合*/;
if(d==1){
if(m==1){
y=y-1;m=12;d=31;
}
if(m==2||m==4||m==6||m==9||m==11){
m=m-1;d=31;
}
if(m==3 ){
if(y%4==0){
m=2;d=29;
}
else{
m=2;d=28;
}
}
if(m==3||m==5||m==4||m==10||m==12){
m=m-1;d=30;
}
}
else{
d=d-1;hl=24+hl
}
}

if(hl>24){
if((m==1||m==3||m==5||m==7||m==8||m==10)&&d==31){
m=m+1;d=1;
}
if((m==4||m==6||m==9||m==11)&&d==31){
m=m+1;d=1;
}
if(m==2){
if(y/4%=0 && d==29){
m=3;d=1;
}
if(y/4!=0 && d==28){
m=3;d=1;
}
}
if(m==12 && d==31){
y=y+1;m=1;d=1;
}
else{
d=d+1;
}
h=hl-24;
}

document.write(y,"年",m,"月",d,"日",hl,"時",mi,"分");
}
//-->
</script>
</head>

<body>
<script language="JavaScript">
<!--//
document.write("ニューヨークの現在時刻は");
localtime(-5);
document.write("です");
 //-->
</script>
</body>

［解説］
・<head>〜</head>では関数を定義します。localtime()がそれで、表示したい地域の時間帯を変数zoneとします。Get関数でクライアントのパソコンの時刻と時間帯を獲得します。これと表示したい地域の時間帯の差を取ります。あとは、日付の変更を月月替わり、年末年始の条件で変化させます。月は大の月と小の月、更に2月は閏年と平年とで区別します。最後にdocumet.write()で年、月、日、時、分までを表示させます。ここまでが関数になっています。
・次に<body>〜</body>の時刻を表示したいところでJavaScriptを入れます。
青字の部分は各人適当に書き換えてください。localtime()関数には表示までを含んでいるので、（）の中に表示したい地域の時間差だけを入れてください。

ユーザーが各人のホームページでこれを使いたい場合は、そのままコピーして下さい。このホームページを表示したままで、スクリプトの部分だけをカーソルでなでるとそこが選択されますので、それをスクラップブックなりノートパッドにコピーして下さい。

(c)Harry Ono, 1996

このページへのリンクは自由ですが、本文の内容を無断で転載、修正することを禁じます。

My Tipsのページへ