2014年9月21日日曜日

JavaScriptでタイマーを作る

カウントダウン式のタイマーを作る場合、一定時間ごとに処理を指定できるsetInterval関数を利用する。setIntervalは指定した時間の度に実行するもので、setInterval(関数名, ミリ秒)で指定する。(1000ミリ秒 = 1秒)

始めにでカウントダウンの数字を保持しておくためのグローバル変数を定義しておく。

var counter = 10;
countdownTimer = setInterval(countdown, 1000);

function countdown(){
    counter--;
}

このようにすることで、countdown関数を1000ミリ秒(1秒)毎に実行する。注意する点として、counterは0よりも小さくなっても実行し続けるので、0になって停止したい場合は、

function countdown(){
    counter--;

    if( counter == 0 ){
        clearInterval(countdownTimer);
    }
}

setIntervalの実行の際に用意した変数をclearIntervalのカッコの中(引数)に入れて、一定時間ごとの指定を削除する。
(clearhIntervalを使わないならば、setIntervalの値を変数に入れなくても良いです)

HTMLでカウントダウンタイマーを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カウントダウン</title>
<script>
var countdownArea;

//カウントダウンを表示するエリアのオブジェクトを取得しておく
window.onload = function(){
    countdownArea = document.querySelector("#countdown");
};

var counter = 10;
countdownTimer = setInterval(countdown, 1000);

function countdown(){
    counter--;
    //カウントダウンエリアの文字をカウンターの数字で上書き
    countdownArea.innerHTML = counter;

    if( counter == 0 ){
        clearInterval(countdownTimer);
    }
}
</script>
</head>
<body>

<div id="countdown"></div>

</body>
</html>
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)