時計を表示する
今度は、ページ内に時計を表示させるスクリプトを作りましょう。 大体の流れは前ページに書いた通りで、異なるのはDateオブジェクトから取得するのが時分秒になる点です。 また、表示に関しては、時分秒は日付とは異なり頻繁に値が変わるものですので、一工夫必要になります。
データ取得部
では、早速作成に取り掛かりましょう。 今回は、頻繁に更新していかないと時計としての用をなしませんので、必要な部分を関数にまとめて次々と処理されるように仕掛けます。 関数内でDateオブジェクトを定義し、次にそこから必要なデータを取り出してそれぞれ変数の中に格納します。 また、それぞれの値が一桁のときに表示が詰まるのは少々不恰好になるので、そうならないような仕掛けを施しましょう。
例：
<script type="text/javascript">
<!--
function clok(){
now= new Date();
nhr=now.getHours(); // nowから時間を取得し変数nhrに格納
nmin=now.getMinutes(); // nowから分を取得し、変数nminに格納
nsec=now.getSeconds(); // nowから秒を取得し、変数nsecに格納
if (nhr<10){nhr=" "+nhr;} // 時間が一桁の場合、先頭に半角スペースを挿入
if (nmin<10){nmin="0"+nmin;} // 分が一桁の場合、先頭に0を挿入
if (nsec<10){nsec="0"+nsec;} // 秒が一桁の場合、先頭に0を挿入
ntime=nhr+":"+nmin+"\'"+nsec+"\""; // 時分秒を一つの変数に統合
/* ここに追加する内容あり */
setTimeout("clok()",1000); // 一定時間後に、関数clok()を呼び出し
}
//-->
</script>
時間を取得する部分だけをまとめたスクリプトが、以上のものになります。 先にこの部分だけ解説しておきます。
まず、この処理自体を関数clok()としてまとめます。 関数は、呼び出されるまでは処理されませんが、他の箇所から呼び出されることで一連の処理を一つの処理のように行うものです。 この中で、nowというDateオブジェクトを定義し、そこからそれぞれ必要な値を取得していきます。 その後、各数値が一桁の場合に先頭に文字を入れて表示をすっきりさせるための処理をしています。 その後、時計表示風にすべての表示を統合して変数に格納しています。 すべて例中に説明を入れてある通りです。
その次にあるコメント行は、そのままの意味で、後々このスクリプトを完成させるために必要な行をここに記述します。 ここの内容は後述します。
関数の最後の行の処理の「setTimeout(処理内容,待機時間)」は、指定された時間だけ処理を待機し、その後に指定された処理内容を実行するもので、ここでは1秒間待機した後に自関数を再び呼び出すように指定してあります。 こうすると、常に1秒間隔で同じ処理が繰り返されるようになります。 ちなみに、このように関数内で自関数を再び呼び出し、延々と同じ処理を繰り返させることを再帰といいます。 なお、setTimeout()で指定する待機時間は、ミリ秒(1000分の1秒)単位になります。
表示部の作成
前掲の時間のデータを取得する部分だけでは、それを表示させる仕掛けがないので満足に用を為しません。 そのため、特定の場所に時間を表示させるような仕掛けが必要になります。 ただ、前ページの日付と違い、時計は刻々と数値が変化します。 前ページで紹介した「document.write()」メソッドでは、ページロード時に内容を書き出すことはできますが、その表示を動的に変化させることができないので、この方法を利用することはできません。 では、どうするかですが、今回は動的に内容を変化させることのできる表示方法を二つ紹介します。