デジタル時計を作る


ホームページ上で表示するデジタル時計を 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> //(リスト1)

次に<BODY>〜</BODY>内の適当な場所に時計を表示するテキストボックスをセットします。

<FORM NAME="Clock">
<INPUT TYPE="text" NAME="Box" SIZE=36>
</FORM> //(リスト2)

そしてページがロードされると時計が動き出すように<BODY>タグ内に定義します。

<BODY...onLoad="DC()"> //(リスト3)

これが一番シンプルで、プログラムも簡単ですみます。もっと丁寧な表示をさせたい、というのであれば、リスト1の赤字の部分を消して次のように書き換えます。

Year = Tim.getYear();
if (Year < 1900) Year += 1900;
document.Clock.Box.value = Year + "年" + (Tim.getMonth() +1) + "月" + Tim.getDate() + "日" + Tim.getHours() + "時" + Tim.getMinutes() + "分" + Tim.getSeconds() +"秒";
//(リスト4)

そしてリスト2の SIZE も31ぐらいにしておきましょう。(Netscape でも正常に表示できるようにするため)

どうせここまでやったのですから、本格的なデジタル時計を作ってみたいものです。
ビジュアルな効果を出すために<TABLE>タグを用い、色を付けてみましょう。リスト2の代わりに次のリスト5を作ります。

<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> //(リスト5)

これは単に時間を表示するだけでなく、ボタンを押すことで西暦と年号、24時間制と12時間制の表示切り替え、更に設定した時間にメッセージを表示するアラーム機能を備えた時計です。
リスト1の代わりに次のリスト6を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> //(リスト6)

このサンプル・プログラムでは、一番下の3つの入力欄にそれぞれ時刻(24時間制)と分と秒を半角数字で入れ、「アラーム」ボタンを押すことでアラームを表示する時間がセットされます。 (もう一度押すとセット解除となります。但し数字は消えません。)

3分後ぐらいにセットして試してみて下さい。

My Clock







次のトピックは「TABLE タグを活かす(1)」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで