Step.5 - リアルタイムに時間を表示する


Step.3 や Step.4 の時間表示では ホームページを表示した時点の時間にすぎません。何分も時間が過ぎたら意味がなくなってきます。フォームを使えば、簡単に現在の時間をリアルタイムに表示できます。


Step テーマ

実行例

いらっしゃいませ、ただいまは です


リスト

<script type="text/javascript"><!--
function myFunc(){
}
// --></script>

<form name="myForm">
いらっしゃいませ、ただいまは
<input type="text" size="28" name="myFormDate">
<input type="text" size="15" name="myFormTime">
です
</form>
<script type="text/javascript"><!--
// --></script>


サンプルだけの HTMLは こちらへ

説明

● フォームに値をセットする

このサンプルは Step.3 で説明した日付を表示するスクリプトをほんの少し変更しただけです。
今回はフォームに時間を表示しました。このようにフォームは入力するだけでなく出力にも使えるわけです。

日付と時間を表示する関数名を myFunc() という名前で定義して、メインはそれを呼ぶだけのスクリプトになっています。
(もう少し、それらしい名前をつけてあげましょう (^^; )

Step.3 から変わったものとして、日付と時間を表示していた、
document.write(myMess);
の行が、
document.myForm.myFormDate.value = myMess1;
document.myForm.myFormTime.value = myMess2;
の、2行に変わっています。

この2行は、それぞれのフォームに日付と時間をセットしています。セットするだけでフォームに表示されます。document.write() の代わりですね。

= の左にある長い変数らしきものは、
<form name="myForm">
<input type="text" size="28" name="myFormDate">
<input type="text" size="15" name="myFormTime">
</form>
を見れば、なんとなくわかるでしょうか?

document.<FORMのNAME属性値>.<INPUTのNAME属性値>.value
です。
フォームへのデータセットの方法はいろいろありますが、今回はこの方法でやります。

年月日と曜日を document.myForm.myFormDate.value
時分秒を document.myForm.myFormTime.value
にセットしています。


● setInterval

setInterval( "myFunc()" , 1000 );
これが、今回のメインです。

setInterval()は、指定の関数を 指定の時間の周期に動かすというスグレモノです。
括弧 () の中にそれらを指定します。この括弧の中に渡す変数(値)のことを「引数」とか「パラメータ」と呼びます。

setInterval( "関数名" , 起動するミリ秒 );
という書式なので、
setInterval( "myFunc()" , 1000 );
となっております。
※ 1秒は 1000ミリ秒です。1分は 60000ミリ秒です (^^;

これで、1秒周期に myFunc() が実行されるので1秒単位でフォームに現在時間が表示されるわけです。
※この場合、1秒経過するまでsetIntervalで処理が止まっているわけではありません。myFunc()を1秒周期で呼ぶタスクがバックグラウンドで動きます。なので setInterval()の次になにか処理の記述があれば、1秒待つことなく、その処理は実行されます。

このスクリプトをフォームを定義した後に実行していることに注目してください。
<form name="myForm">いらっしゃいませ、ただいまは
<input type="text" size="28" name="myFormDate">
<input type="text" size="15" name="myFormTime"> です
</form>
<script type="text/javascript"><!--
setInterval("myFunc()",1000);
// --></script>

日付と時間を表示する関数 myFunc() は、日付と時間を取得して指定のフォームにセットするようにしています。
つまり、このフォームがまだページに読み込まれて表示される前に myFunc() を実行されてしまったら、セット先のフォームを見つけることが出来ずに エラーが発生してしまうわけなのです。
▲TOP

関連参考リンク


▲TOP

余談

ページを全部読み込んでからスクリプトを実行させるには、

<body onload="スクリプト">

という指定方法があります。今回であれば、
<body onload="setInterval('myFunc()',1000);">
となります。

▲TOP

Q&A



▲TOP