イヌでもわかるJavaScript講座

【リスト】　（子ウィンドウ）

<html>
<head>
</head>
<body>
<script language="JavaScript"><!--
myCnt = 0;  // 残り時間を格納する変数
myTim = 0;  // タイマーのハンドル
function myGo(){  // ボタンが押されたら実行される
  mySelect = document.myForm.myMenu.selectedIndex;
  myCnt = eval(document.myForm.myMenu.options[mySelect].value);
  myTim = setInterval("myTimer()",1000); // １秒周期にmyTimer()を呼ぶ
}
function myTimer(){       // タイマーメインルーチン
  myCnt = myCnt-1;        // タイマーカウントを１ずつ減らす
  document.myForm.myFormSec.value = "あと " + myCnt + " 秒";
  if (myCnt == 0){        // ０秒になったか？
    clearInterval(myTim); // setInterval()を解除する
    alert("ラーメン食べ頃だよ！！");
  }
}
// --></script>

<p align="center">
<form name="myForm">
<select name="myMenu" size="1">
<option value="180">好みの時間を選んでね </option>
<option value="300">５分 </option>
<option value="195">３分１５秒 </option>
<option value="180">３分 </option>
<option value="165">２分４５秒 </option>
<option value="150">２分３０秒 </option>
<option value="120">２分 </option>
<option value="60">１分 </option>
<option value="30">３０秒 </option>
</select> 
<input type="button" value="GO!" onclick="myGo()"><br><br>
  食べ頃まで <input type="text" size="15" name="myFormSec"> です。
</form>
</p>
<form>
<center><input type="button" value="閉じる"
    onclick="window.close()">
</center>
</form>
</body>
</html>

<html> <head> </head> <body> <script language="JavaScript"></script> <p align="center"> <form name="myForm"> <select name="myMenu" size="1"> <option value="180">好みの時間を選んでね </option> <option value="300">５分 </option> <option value="195">３分１５秒 </option> <option value="180">３分 </option> <option value="165">２分４５秒 </option> <option value="150">２分３０秒 </option> <option value="120">２分 </option> <option value="60">１分 </option> <option value="30">３０秒 </option> </select> <input type="button" value="GO!" onclick="myGo()"><br><br> 食べ頃まで <input type="text" size="15" name="myFormSec"> です。 </form> </p> <form> <center><input type="button" value="閉じる" onclick="window.close()"> </center> </form> </body> </html>

サンプルだけのＨＴＭＬは こちらへ

【説明】

今回はラーメンタイマーを子ウィンドウで作ってみます。メインウィンドウに作ったら、サーフィンできなくなりますからね。(^^;

プログラムは、
Step.6 「日付表示はありきたり？だったら表現を変えてみましょう」のアイデアで、
Step.25 「コンボボックスを使って、目次を作りましょう」を改造して時間を選択する機能を付加して、
Step.31 「小さな別ウィンドウを作ってＢＧＭを流してみましょう」でやった子ウィンドウを使います。

目新しいことと言えば、いつもグルグルとプログラムをループするのに setTimeout( ) を使っていましたが、今回は、もう少し便利な、setInterval( ) を使ってみます。

パラメータは、
setTimeout ( "実行する関数" , 実行する時間 ) ;
setInterval ( "実行する関数" , 実行する時間 ) ;
と、両者共通です。実行する時間はミリ秒（１秒＝１０００ミリ秒）です。

なにが違うかというと、setTimeout ( ) は、"実行する関数" を指定の時間後に実行するものでしたが、setInterval ( ) は、"実行する関数" を、指定の時間周期に繰り返し実行するというものです。

よって、setInterval ( "myTimer ( )" , 1000 ); とすれば、１秒周期に myTimer ( ) 関数を実行します。

おっと、これでは、無限ループですね。ラーメンもうどんになってしまいます。 (^^;

そこで、myTim = setInterval ( "myTimer ( )" , 1000 ); とすると、myTim には、setInterval ( ) のハンドルがセットされます。
ハンドル !? うーん、プログラム言語であるＣ言語は、そんな用語を使っているのですが、JavaScript は、なんと言っているんでしょうか。。資料がないもんで。。(^^;

そして、 clearInterval ( myTim ); を実行すると、さっきの setInterval ( ) のタイマーが解除されるわけです。ですから、myTim の値は意識する必要はありませんが、このハンドルをどこかで覚えておかないと、解除できないということです。

いままでのステップで使いまくっている、setTimeout ( ) も、同じように、clearTimeout ( ) にてタイマーをクリアするのが正解なのですが、しなくても勝手にクリアしてくれているのではと勝手に思いこんで使っていません。がはは～ o(^o^)o