JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

JavaScript でカウントアップタイマーを作る方法

JavaScript でカウントアップ!

今回は JavaScript でカウントアップタイマーを作ります。タイマーは一定の時間で繰り返し処理ができる「setInterval」関数を使います。

var tm = setInterval("sample()", 1000);

解説:1000ms(1秒)ごとに関数 sample() を実行する。 

動作サンプル

1秒ごとにカウントアップして100で自動的にストップします。

0

JavaScript コード

今回の JavaScript コードです。jQuery で作ると少し簡単になりますね。 

     var a = 0;
     var box;
     var tm;

     window.onload = function() {
          // iruka というエレメントを取得
          box = document.getElementById("iruka");
          //タイマースタートと同時にタイマーを取得
          tm = setInterval("kujira()",1000);
     };

     function kujira() {
          //カウントアップ
          a += 1;
          // a の値を box オブジェクトに表示
          box.innerHTML = a;
          if(a >= 100) {
               //タイマーストップ
               clearInterval(tm);
          }
     } 

CSS

今回のサンプルのCSSです。

.box {
     background-color: #F33;
     font-weight: bold;
     color: #FFF;
     font-size: 72px;
     border-radius: 20px;
     padding: 20px;

END