JavaScript

Web上で動くタイマーを作る①setIntervalを使う

スポンサーリンク




 

こんばんは!

Web上で動くタイマーを作成したので、その作成方法について説明したいと思います。

全部で4回に分けて説明しますので、気になるところだけでも見ていただければ幸いです。

また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。

setIntervalを使ってタイマー処理をする

setIntervalは以下のように使います

例として1秒ごとにカウントアップするプログラムを書いてみます。

関数を分けて記述する場合は以下のようになります。

 

clearIntervalで処理を停止する

先ほどのプログラムは永遠に動き続けてしまいます、ですのでそれを止めるためにclearIntervalを使用します。

では先ほどのプログラムにclearIntervalを追加してみます。

カウントの値が9になったときに処理を停止しています。

実行してみると、10以上の数字が表示されないと思います。

タイマーらしくしてみる

setIntervalの使い方は理解したと思いますので、今度はタイマーらしくカウントダウンのプログラムを書いてみます。

getElementByIdを使ってテキストボックスに入力した値を読み取り、カウントが0になると処理を終了します。

実行画面

随分とタイマーっぽくなりましたね、これだけでも一応「タイマーが完成しました」と言えると思います。

次回はスライダーについて説明したいと思います。

Web上で動くタイマーを作る②スライダーを使用する

スポンサーリンク




-JavaScript

Copyright© 物を作る者 , 2020 All Rights Reserved.