時計
この例は、画面に現在の時刻を表示し、更新するものです
ソースとしては、以下の通りです
<![CDATA[
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML勉強会テキスト</TITLE>
<SCRIPT language="javascript">
<!--
function showclock() {
now = new Date();
h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();
if ( h < 10 ) h = "0" + h;
if ( m < 10 ) m = "0" + m;
if ( s < 10 ) s = "0" + s;
//ここでは、FORMのINPUTへ時刻を設定しています
document.targetform.targetinput.value = h + ":" + m + ":" + s;
//ここでは、ステータスバーへ時刻を設定しています
status = h + ":" + m + ":" + s;
//次のインターバルを得るため、タイマーをセットします
setTimeout("showclock()",500);
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" onLoad="showclock()">
<FORM name="targetform">
現在時刻：<INPUT type="text" name="targetinput">
</FORM>
</BODY>
</HTML>
]]>
function showclock()は、時刻を読みとり、その値を表示します
ここでは、２つの方法で時刻を表示してみました
１．FORMのINPUT項目への表示
<FORM>タグの中の<INPUT>タグのvalueを書き換えます
指定の仕方は、それぞれのタグ内に、nameで名前を指定しておき、document.targetform.targetinput.valueの形で参照させます
左から、このドキュメント、<FORM>タグの名前、<INPUT>タグの名前、そして、操作する目的(value)となっています
２．ステータスバー
名前としてstatusを使用すると、そこはステータスバーを示します
ここに、表示させたい文字列を代入してやると、ステータスバーに表示されます
ここでは、function showclock()を起動するため、<BODY>タグで、onLoadを指定しています
onLoadは、このページが読み込まれた時、起動する処理を指定するもので、この場合、function showclock()が起動されます
しかし、このままでは、このページが読み込まれた時しか、function showclock()が動作しません
そこで、function showclock()は、自分の中で、setTimeoutを使用して、一定時間後、再度自分を起動する様、工夫しています
setTimeoutは、指定時間経過後、指定処理を起動してくれる便利なものです
setTimeoutは、その時間をミリ秒で指定します(当例では、500ミリ秒としています
ここをクリックすると、この画面の実行結果が見れます