こんばんは！
Web上で動くタイマーを作成したので、その作成方法について説明したいと思います。
全部で4回に分けて説明しますので、気になるところだけでも見ていただければ幸いです。
また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。
setIntervalを使ってタイマー処理をする
setIntervalは以下のように使います
1 | setInterval(関数,ループ間隔(ミリ秒)) |
例として１秒ごとにカウントアップするプログラムを書いてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>setInterval Demo</title> </head> <body> <div id="writehere"></div> <script> var count = 0; var countup = setInterval(function(){ count++; writehere.innerHTML=count; } ,1000); </script> </body> </html> |
関数を分けて記述する場合は以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>setInterval Demo</title> </head> <body> <div id="writehere"></div> <script> var count = 0; function countup(){ count++; writehere.innerHTML=count; } var set = setInterval(countup,1000); </script> </body> </html> |
clearIntervalで処理を停止する
先ほどのプログラムは永遠に動き続けてしまいます、ですのでそれを止めるためにclearIntervalを使用します。
1 | clearInterval(タイマーのID、先ほどの例ではcountup) |
では先ほどのプログラムにclearIntervalを追加してみます。
カウントの値が9になったときに処理を停止しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <title>setInterval Demo</title> </head> <body> <div id="writehere"></div> <script> var count = 0; var countup = setInterval(function(){ count++; writehere.innerHTML=count; if(count >= 9){ clearInterval(countup); } } ,1000); </script> </body> </html> |
実行してみると、10以上の数字が表示されないと思います。
タイマーらしくしてみる
setIntervalの使い方は理解したと思いますので、今度はタイマーらしくカウントダウンのプログラムを書いてみます。
getElementByIdを使ってテキストボックスに入力した値を読み取り、カウントが0になると処理を終了します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <title>setInterval Demo</title> </head> <body> <input type="text" id="input_value" value="0"> <input type="button" onclick="countdown()" value="スタート"> <div id="remain"></div> <script> function countdown(){ var count = document.getElementById("input_value").value; var countdownid = setInterval(function(){ count --; remain.innerHTML=count; if(count==0){ clearInterval(countdownid); } } ,1000); } </script> </body> </html> |
実行画面
随分とタイマーっぽくなりましたね、これだけでも一応「タイマーが完成しました」と言えると思います。
次回はスライダーについて説明したいと思います。