JavaScript - 時間の処理2

JavaScript プログラミング

　５．時間の処理 2

　普通の時計のように、常に時間を表示するようにするにはタイマーを使う。

(4) タイマー
　タイマーとは、設定した時間になったときに指定した処理を実行するもので、次の2種類ある。

一度だけ setTimeout x = setTimeout(関数, 時間);

定期的に setInterval x = setInterval(関数, 時間);

　時間はタイマーを実行してから何ミリ秒後で指定する。setTimeoutメソッドはその時間になったときに関数を呼び出す。setIntervalメソッドはその時間ごとに関数を呼び出す。

　フォームを1つ用意し、入力部品を配置（左図参照）する。フォームはname="rei8"とする。
　・1行テキスト　…　size="20" type="text" name="now"

HTMLリスト - setTimeoutメソッドを使った例　[[jsrei8.html]]

<HTML>
<HEAD>
<TITLE>現在の時間</TITLE>
</HEAD>
<BODY onload="getnow();">
<SCRIPT language="JavaScript">
<!--
function getnow(){
    hms = new Date();
    tid = setTimeout("getnow()",1000);
    document.rei8.now.value = hms.getHours()+"時"+hms.getMinutes()+"分"+hms.getSeconds()+"秒";
}
//-->
</SCRIPT>
<FORM name="rei8">現在の時刻 <INPUT size="20" type="text" name="now"></FORM>
</BODY>
</HTML>

　時間までに中止するときは、clearTimeoutメソッドを使う。上のリストの場合次のように書く。
　　　　clearTimeout(tid); //setTimeoutで取得した値(tid)を引数とする。

HTMLリスト - setIntervalメソッドを使った例　[[jsrei8b.html]]

<HTML>
<HEAD>
<TITLE>現在の時間</TITLE>
</HEAD>
<BODY onload="getnow2(); tid=setInterval('getnow2()', 1000);">
<SCRIPT language="JavaScript">
<!--
function getnow2(){
    hms = new Date();
    document.rei8.now.value = hms.getHours()+"時"+hms.getMinutes()+"分"+hms.getSeconds()+"秒";
}
//-->
</SCRIPT>
<FORM name="rei8">現在の時刻 <INPUT size="20" type="text" name="now"></FORM>
</BODY>
</HTML>

　時間までに中止するときは、clearIntervalメソッドを使う。上のリストの場合次のように書く。
　　　　clearInterval(tid); //clearIntervalで取得した値(tid)を引数とする。


JavaScript プログラミング	Copyright © 2003 Hiroshi Masuda

一度だけ	setTimeout	x = setTimeout(関数, 時間);
定期的に	setInterval	x = setInterval(関数, 時間);