JavaScriptカウントダウンタイマー入門setInterval()編1

JavaScriptではC#、VBなど他のプログラミングと同じように簡単にタイマーを作成することができます。setInterval()とsetTimeout()の2つのコマンドが用意されています。このページではsetInterval()を考慮してタイマーの仕組みを解説します。setInterval()は一定の時間内に関数を呼び出します。

setInterval()を使ったJavaScriptの例

setInterval()は一定の時間に関数を呼び出します。テキストボックスに「1秒、2秒、3秒・・・・」と表示させたいと思います、htmlのbody内に以下の内容を記入してみてください。

<form name="tim">
<input type="button" value="スタート" onclick="timestrt()"><br>
<input type="text" name="byou" 　value="">
</form>
<script>
//変数の初期値を0に設定する
var num=0;
//テキストボックスに数字を書き込む関数
function strt() {
//ココを通過するたびに変数に1を追加する
num = num + 1;
//テキストボックスに記入
document.tim.byou.value = num+"秒";
}
//setInterval()の関数
function timestrt() {
//関数strt()を1000ミリ秒間隔で呼び出す
setInterval("strt()", 1000);
}
</script>

サンプル

スクリプトの内容

フォーム名は「tim」、テキストボックス名は「byou」にしてあります。ボタンを押すと関数「timestrt()」を呼び出してsetInterval()が起動します。

続いて関数strt()が1000㎜秒ごとに呼び出されてテキストボックスに数字が表示されるようになっています。

setInterval(関数名、間隔)

特定の関数を指定した間隔で呼び出します。単位は㎜秒

上記コードでは関数strt()が1000㎜秒間隔で呼び出されています。

関数名はクォーテーションで囲む必要があります、注意してください。