ホームページ上で表示するデジタル時計を JavaScript で作ってみましょう。時計は普通、テキストボックスの中に表示します。 ホームページ上に直接書き込もうとしても、入力内容を変更させることができないので、動く時計の用を成さないからです。 現在時間を表示するには、まず日付オブジェクト Date を生成してから、年・月・日・時刻・分・秒を取得するメソッドを使用しますが、 これだけでは時計は動かないので、タイマーと併用します。
まず一番簡単な方法でやってみましょう。HTMLの</TITLE>〜</HEAD>間に DC() という関数を定義します。
- <SCRIPT Language="JavaScript">
- <!--
- T = 10;
- function DC(){
- clearTimeout(T);
- T = setTimeout("DC()", 1000);
- Tim = new Date();
- document.Clock.Box.value = Tim.toLocaleString();
- }
- //-->
- </SCRIPT> //（リスト１）
次に<BODY>〜</BODY>内の適当な場所に時計を表示するテキストボックスをセットします。
- <FORM NAME="Clock">
- <INPUT TYPE="text" NAME="Box" SIZE=36>
- </FORM> //（リスト２）
そしてページがロードされると時計が動き出すように<BODY>タグ内に定義します。
- <BODY．．．onLoad="DC()"> //（リスト３）
これが一番シンプルで、プログラムも簡単ですみます。もっと丁寧な表示をさせたい、というのであれば、リスト１の赤字の部分を消して次のように書き換えます。
- Year = Tim.getYear();
- if (Year < 1900) Year += 1900;
- document.Clock.Box.value = Year + "年" + (Tim.getMonth() +1) + "月" + Tim.getDate() + "日" + Tim.getHours() + "時" + Tim.getMinutes() + "分" + Tim.getSeconds() +"秒";
- //（リスト４）
そしてリスト２の SIZE も31ぐらいにしておきましょう。（Netscape でも正常に表示できるようにするため）
どうせここまでやったのですから、本格的なデジタル時計を作ってみたいものです。
ビジュアルな効果を出すために<TABLE>タグを用い、色を付けてみましょう。リスト２の代わりに次のリスト５を作ります。
- <TABLE border=1 bgcolor="#0000FF"><TR><TD align="center">
- <FONT color="#FFFFFF"><B>My Clock</B></FONT><P>
- <FORM NAME="Clock">
- <INPUT TYPE="button" NAME="btn1" VALUE="西暦" onClick="Koyomi()">
- <INPUT TYPE="text" NAME="txt1" SIZE=7>年
- <INPUT TYPE="text" NAME="txt2" SIZE=2>月
- <INPUT TYPE="text" NAME="txt3" SIZE=2>日
- <INPUT TYPE="text" NAME="txt4" SIZE=2><P>
- <INPUT TYPE="button" NAME="btn2" VALUE="24時間" onClick="Jikan()">
- <INPUT TYPE="text" NAME="txt5" SIZE=6>時
- <INPUT TYPE="text" NAME="txt6" SIZE=2>分
- <INPUT TYPE="text" NAME="txt7" SIZE=2>秒<P>
- <INPUT TYPE="button" NAME="btn3" VALUE="アラーム" onClick="Alarm()">
- <INPUT TYPE="text" NAME="txt8" SIZE=2>時
- <INPUT TYPE="text" NAME="txt9" SIZE=2>分
- <INPUT TYPE="text" NAME="txt10" SIZE=2>秒
- </FORM></TD></TR></TABLE> //（リスト５）
これは単に時間を表示するだけでなく、ボタンを押すことで西暦と年号、24時間制と12時間制の表示切り替え、更に設定した時間にメッセージを表示するアラーム機能を備えた時計です。
リスト１の代わりに次のリスト６をHTMLの</TITLE>〜</HEAD>間に書き入れます。
- <SCRIPT Language="JavaScript">
- <!--
- T = 10;
- Cr = 0;
- Me = 0;
- St = 0;
- function DC(){
- clearTimeout(T);
- T = setTimeout("DC()", 1000);
- Tim = new Date();
- with(Tim)
- {
- yy = getYear();
- mm = getMonth()+1;
- dd = getDate();
- hh = getHours();
- mt = getMinutes();
- ss = getSeconds();
- }
- wk = new Array("日","月","火","水","木","金","土");
- with(document.Clock)
- {
- txt2.value = mm;
- txt3.value = dd;
- txt4.value = wk[Tim.getDay()];
- txt6.value = mt;
- txt7.value = ss;
- if (Cr == 0)
- {
- if (yy < 90) txt1.value = "20" + yy;
- else if(yy < 99) txt1.value = "20" + yy;
- else if(yy < 1900) txt1.value = 1900 + yy;
- else txt1.value = yy;
- }
- else
- {
- if (yy < 90) txt1.value = "平成" + (yy + 12);
- else if (yy < 1900) txt1.value = "平成" + (yy - 88);
- else txt1.value = "平成" + (yy-1988);
- }
- if (Me == 0) txt5.value = hh;
- else
- {
- if (hh > 12) txt5.value = "PM " + (hh - 12);
- else txt5.value = "AM " + hh;
- }
- if (St == 1)
- {
- if (txt8.value == hh && txt9.value == mt && txt10.value == ss)
- {
- alert("時間ですよ");
- St = 0;
- }
- }
- }
- }
- function Koyomi(){
- with(document.Clock)
- if (Cr == 0)
- {
- Cr = 1;
- btn1.value = "年号";
- }
- else
- {
- Cr = 0;
- btn1.value = "西暦";
- }
- }
- function Jikan(){
- with(document.Clock)
- if (Me == 0)
- {
- Me = 1;
- btn2.value = "12時間";
- }
- else
- {
- Me = 0;
- btn2.value = "24時間";
- }
- }
- }
- function Alarm(){
- if (St == 0) St = 1;
- else St = 0;
- }
- //-->
- </SCRIPT> //（リスト６）
このサンプル・プログラムでは、一番下の３つの入力欄にそれぞれ時刻（24時間制）と分と秒を半角数字で入れ、「アラーム」ボタンを押すことでアラームを表示する時間がセットされます。 （もう一度押すとセット解除となります。但し数字は消えません。）
３分後ぐらいにセットして試してみて下さい。