Javascript小僧：時間を表示する。

TV TOKYOでやっている密室美少女という番組のホームページに残り時間を表示している部分がありますね。

http://www.tv-tokyo.co.jp/tx_nazo/



この部分です。
１秒ずつ、残り時間がリアルタイムに減っていっていますね。
これをJavascriptで実現するには、どうすればいいのでしょうね。

ある瞬間の残り時間を計算する関数を考えます。
Javascriptではなく、日本語でイメージしてみます。

関数　残り時間（タイムリミット）｛
　残り時間＝タイムリミット－現在時刻
｝

こんな感じですかね。では、リアルタイムに残り時間を表示するためには、どうしたらいいでしょう。
「残り時間」関数を１秒ごとに呼び出せば良さそうです。
では、関数を周期的に呼び出すにはどうしたらいいでしょう。
Javascriptには、setIntervalという関数があり、周期的呼び出しを行うことができます。

http://cheese999.blog.so-net.ne.jp/2013-07-28-1
の記事で紹介したコードの中で

T[8] = setInterval("DspDate1()",500);

というコードがあります。このコードを実行すると、DspDate1関数を500ミリ秒（=0.5秒）間隔で呼び出し、日時を表示します。１秒間隔としていないのは、１秒間隔だと、秒が飛ぶ場合があるかもしれないので。。２秒の次が、４秒とか。。

ここで、setIntervalの結果をT[8]という変数に代入しています。これは、複数の周期呼び出しを設定したときに、特定の周期呼び出しを指定するために使用します。

周期的呼び出しを止めるには、

clearInterval(T[8]);

とします。clearInterval関数の引数には、setIntervalの結果を代入したのと同じT[8]という変数を指定します。

タグ：setInterval JavaScript clearInterval

コメント 4

nice! ありがとうございます。[__猫]

setInterval/clearIntervalで使用しているID変数（ここではT[8]）について、説明を追記しました。
by cheese999 (2013-08-05 05:36) 

ご訪問 & nice! & コメント　ありがとうございました。
今後ともよろしくお願いします。
by hasseyおやじ (2013-08-05 23:27) 

hasseyおやじさん、こちらこそ、よろしくお願いします。
[__猫]
by cheese999 (2013-08-07 17:13) 

上記の「残り時間」関数の様に、引数を持つ関数をsetIntervalで周期的呼び出しを行う場合、無名関数内で改めて関数実行するなどの工夫が必要です。

T[8] = setInterval( function(){ 残り時間(タイムリミット); }, 500);

【参考URL】
http://www.gravity-works.jp/gravica/web/js/003755.html
（グラビカ学習帳）
by cheese999 (2013-08-08 23:25)