実行例

【リスト】ポップアップウィンドウ(noodleswin.htm)

<html>

<head>

myCnt = 0;

myTim = 0;

function myGo(){

mySelect = document.myForm.myMenu.selectedIndex;

myCnt = eval ( document.myForm.myMenu.options[mySelect].value );

myTim = setInterval ( "myTimer()", 1000 );

}

function myTimer(){

myCnt = myCnt - 1;

document.getElementById( "countdown" ).innerHTML = "食べ頃まであと " + myCnt + " 秒です。";

if ( myCnt == 0 ){

clearInterval( myTim );

alert( "ラーメン食べ頃だよ！！" );

}

// --></script>

</head>

<body>

<strong>らうめんタイマー</strong><BR><BR>

<option value="180">好みの時間を選んでね </option>

</select> <input type="button" value="GO!" onclick="myGo()"><BR><BR>

<SPAN ID="countdown">時間を選んで GO!</SPAN><BR><BR>

</div>

</form>

</body>

</html>

<html>
<head>
<script type="text/javascript"><!--
myCnt = 0;
myTim = 0;

function myGo(){
  mySelect = document.myForm.myMenu.selectedIndex;
  myCnt = eval ( document.myForm.myMenu.options[mySelect].value );
  myTim = setInterval ( "myTimer()", 1000 );
}

function myTimer(){
  myCnt = myCnt - 1;
  document.getElementById( "countdown" ).innerHTML = "食べ頃まで あと " + myCnt + " 秒 です。";
  if ( myCnt == 0 ){
    clearInterval( myTim );
    alert( "ラーメン食べ頃だよ！！" );
  }
}
// --></script>
</head>
<body>
<form name="myForm">
<div align="center">
<strong>らうめんタイマー</strong><BR><BR>
<select name="myMenu">
<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>
<SPAN ID="countdown">時間を選んで GO!</SPAN><BR><BR>
<input type="button" value="閉じる" onclick="window.close()">
</div>
</form>
</body>
</html>

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

説明

今回はラーメンタイマーをポップアップウィンドウで作ってみます。
メインウィンドウに作ったら、移動できなくなりますからね。(^^;

コンボボックスで好みの時間を選択してもらって setInterval でカウントダウンってとこです。

今回、目新しいコトといえば、setInterval の戻り値を退避しました。

myTim = setInterval ( "myTimer()", 1000 );

いままでの setInterval を使うサンプルはすべて永久ループでした。
今回は時間になると止めなければなりません。

setInterval のループタイマーを解除するには、
clearInterval
を使います。

パラメータに、setInterval の戻り値を渡します。

clearInterval( myTim );

あとは、alert にて、「じかんだよ！」と知らせてあげます。

alert( "ラーメン食べ頃だよ！！" );

参考ステップ
Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう　※ setInterval
Step.14 九九の問題に答えてみましょう　※ alert
Step.25 プルダウンメニューを使って目次を作りましょうその１　※ コンボボックス操作
Step.44 日付と時間をリアルタイムに表示してみましょう　※ innerHTML

▲TOP