Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.76 - ラーメンタイマー


インターネットでチャットを楽しむなら、やっぱりコーヒーと夜食。
夜食といえば、インスタントラーメン。
ラーメンタイマーを用意してあげましょう。


Step テーマ
● setInterval、clearInterval - タイマー

実行例


ラーメンを食べるなら、お使い下さい →



リスト

<form>
ラーメンを食べるなら、お使い下さい →
<input type="button" value="らうめんタイマー" onclick="window.open('noodleswin.htm', 'noodles', 'width=300,height=250')">
</form>



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

<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">5分 </option>
<option value="195">3分15秒 </option>
<option value="180">3分 </option>
<option value="165">2分45秒 </option>
<option value="150">2分30秒 </option>
<option value="120">2分 </option>
<option value="60">1分 </option>
<option value="30">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 プルダウンメニューを使って目次を作りましょう その1 ※ コンボボックス操作
Step.44 日付と時間をリアルタイムに表示してみましょう ※ innerHTML


 
イヌでもわかるJavaScript講座 お品書き へ戻ります