18、時計


パソコンには時計が組み込まれていることはご存知のことと思います。
JavaScriptで、この内臓時計を取り出して使うことができます。

1、コンピューターの時計を取り出す

前に立体置場を使う場合に事前に準備をしましたね。
コンピューターの時計を使う場合も、時計データを置く置場を準備します。

時計置場名=new Date();

これで、その時点の時計のデータが置場に入ります。
そして時計置場から各データ−を取り出す命令も次の表のように準備されています。

getFullYear() getMonth() getDate() getDay() getHous() getMinutes() getSeconds()

実際に使う場合は

年データ置場=時計置場.getFullYear();

のように書きます。
全要素を取り出すには、次のように書きます.

jikan=new Date(); y=jikan.getFullYear(); //年 m=jikan.getMonth(); //月 d=jikan.getDate(); //日 w=jikan.getDay(); //曜 h=jikan.getHours(); //時 f=jikan.getMinutes(); //分 s=jikan.getSeconds(); //秒
それでは、次の更新ボタンを押して、結果を見てみよう。

ymdwhfs
曜日

曜日は0〜6の数字で返してきます、これでは解りづらいですね!

2、曜日を呼び名に変える

「0」を「日」、「1」を「月」というように変換してやればよい。
前に習った立体置場を使えばできそうですね。
でももっと便利な命令も準備されています。

抜出した文字置場=文字列置場.substar(取出し位置置場,取出す文字数);

具体的には

yobina="日月火水木金土";
ww=yobina.substr(w,1);

とすればwwに今日の曜日が入ります。

ymdwwhfs
曜日

これで、完成したように見えますが、良くみると月がおかしいですね。

3、月を1〜12月に変える


実はJavaScriptでは月を0〜11で返してきます。
したがって、表示するときは

mm=m+1;

のように+1して1〜12に変換してやらなければなりません。

ymmdwwhfs
曜日

これで正しく表示されるようになりました。

4、リアルタイムに動かす

欲を言えば、実際の時計のように、リアルタイムに秒を刻んで、動く時計にしたいですね。
それには、一秒に一度ずつ、今までの命令が自動的に呼び出されて実行されればできるはずです。
一定間隔で繰り返し命令を呼ぶ出す命令も準備されています。

タイマー置場名=setTimeout(”呼び出す命令()”,呼び出す間隔);

呼び出す間隔は1/1000秒単位で書きます。
一秒に一度単位で繰り返す場合は

at=setTimeout("tokei()",1000);

のように書きます。
次の窓で体験してみてください。

ymmdwwhfs
曜日


5、体験してみよう。

それでは次のソースをコピーして「メモ帳」に貼り付け、HTMLファイルとして保存した上で、そのファイルをダブルクリックして開いてみてください。
<html> <head> <title>javascript入門no20</title> <script language="javascript"> <!-- function tokei3(){ kousin(); //時計読み出し //フォームに書きこみ document.tokei3_form.nen.value=y; mm=m+1; document.tokei3_form.tuki.value=mm; document.tokei3_form.hi.value=d; ww="日月火水木金土".substr(w,1); document.tokei3_form.you.value=ww; document.tokei3_form.ji.value=h; document.tokei3_form.hun.value=f; document.tokei3_form.byo.value=s; at=setTimeout("tokei3()",1000); //毎秒繰り返す } //現在の読み取り function kousin(){ jikan=new Date(); y=jikan.getFullYear(); //年 m=jikan.getMonth(); //月 d=jikan.getDate(); //日 w=jikan.getDay(); //曜 h=jikan.getHours(); //時 f=jikan.getMinutes(); //分 s=jikan.getSeconds(); //秒 } //--> </script> </head> <body> <center> <form name="tokei3_form"> <input type="text" name="nen" size=4 value="">年 <input type="text" name="tuki" size=2 value="">月 <input type="text" name="hi" size=2 value="">日 <input type="text" name="you" size=2 value="">曜日 <input type="text" name="ji" size=2 value="">時 <input type="text" name="hun" size=2 value="">分 <input type="text" name="byo" size=2 value="">秒 <input type="button" value="スタート" onClick="tokei3()"> </form> </center> </body> </html>