６．リアルタイム処理をしてみよう

[Index] [Prev]

フォームを使えばリアルタイム処理結果表示も可能となります。ここでリアルタイム時計を作ってみます。

[実行結果]

[プログラム]


<body onload="Nichiji_RealTime()">      //関数Nichiji_RealTime()の呼び出し


<script type="text/javascript" charset="Shift_JIS">

function Nichiji_RealTime(){
   Hizuke=new Date();
   Toshi=Hizuke.getFullYear();
   Tsuki=Hizuke.getMonth()+1;
   Hi=Hizuke.getDate();
   Youbi=Hizuke.getDay();
   Ji=Hizuke.getHours();
   Fun=Hizuke.getMinutes();
   Byou=Hizuke.getSeconds();

   Week=new Array("日","月","火","水","木","金","土");

   document.Form1.Text1.value=(Toshi+"年"+Tsuki+"月"+Hi+"日 "+Week[Youbi]+"曜日 "+Ji+"時"+Fun+"分"+Byou+"秒");

   setTimeout("Nichiji_RealTime()",1000);
};

</script>


<form name="Form1">
   <input type="text" size="45" name="Text1">
</form>

[解説]

今回新しく使うのは
bodyタグ内にある onload="Nichiji_RealTime()"
関数内にある setTimeout("Nichiji_RealTime()",1000);
の２つです。

始めにonload="Nichiji_RealTime()"は
ページが読み込まれたときにNichiji_RealTime()が実行されます。

つまり onload=処理 です。 今回は関数を呼び出していますがonload=alert("message")とやればダイアログが出ます。

続いてsetTimeout("Nichiji_RealTime()",1000);は
何秒ごとに関数を呼び出す、処理を行っています。

setTimeout("関数名",時間);
と設定します。時間の単位はミリ秒なので気をつけてください。 つまり１秒＝1000ミリ秒なので５秒としたい場合は 5000 としてください。

今までのSampleを理解できれば Level1 はクリアです。 Level2 からは条件分岐などのプログラムの基本をやっていきます。

© 2000-2003 Tsukimi / HobbySpace