JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

JavaScript でシンプルカウンターを作ってみよう

JavaScript で作るシンプルカウンター ~

今回は JavaScript でボタンを押すたびにカウントがアップする「シンプルカウンター」を作ってみます。

<設計>

今回作成するシンプルカウンターで使う部品は「カウント表示部」「カウントアップボタン」「リセットボタン」の3種類で、部品はdiv要素とbutton要素で作ります。

1.カウント表示部・・・div要素
2.カウントアップボタン・・・button要素
3.リセットボタン・・・button要素

動作・・・カウントアップボタンをクリックすると表示部のカウントが1ずつアップして、リセットボタンをクリックするとカウントが「0」に戻します。

<HTMLソース>

HTMLでシンプルカウンターの部品を用意します。

<div id="disp_count">0</div>
<input type="button" value="カウントアップ" id="btn_count_up" />
<input type="button" value="リセット" id="btn_reset" />

JavaScript コード>

ポイントはページが読み込まれたらすぐに実行して、2つのボタンにイベントを登録するところです。最初にこの処理をしておかないとボタンをクリックしても反応してくれませんので忘れずに…。

// ページが読み込まれたら実行
window.onload = function() {

     // オブジェクトと変数の準備
     var count_disp = document.getElementById("disp_count");  
     var count_up_btn = document.getElementById("btn_count_up");
     var reset_btn = document.getElementById("btn_reset");
     var count_value = 0;

     // カウントアップボタンクリック処理
     count_up_btn.onclick = function (){
          count_value += 1;
          count_disp.innerHTML = count_value;
     };
     // カウントアップボタンのマウスダウン処理
     count_up_btn.onmousedown = function() {
          count_up_btn.style.backgroundColor = "#00FF00";
     }
     // カウントアップボタンのマウスアップ処理
     count_up_btn.onmouseup = function() {
          count_up_btn.style.backgroundColor = "";
     }
     // リセットボタンのクリック処理
     reset_btn.onclick = function (){
          count_value = 0; count_disp.innerHTML = count_value;
     }
     // リセットボタンのマウスダウン処理
     reset_btn.onmousedown = function() {
          reset_btn.style.backgroundColor = "#00FF00";
     }
     // リセットボタンのマウスアップ処理
     reset_btn.onmouseup = function() {
          reset_btn.style.backgroundColor = "";
     }
};

CSS

CSSで表示とボタンのスタイルを設定します。

#disp_count {
     background-color: #093;
     color: #FFF;
     font-size: 72px;
     border-radius: 10px;
     padding: 20px;
     display: table-cell;
}

#btn_count_up {
     font-size: 36px;
     border-radius: 10px;
     padding: 10px;
     margin-top: 10px;
}

#btn_reset {
     font-size: 36px;
     border-radius: 10px;
     padding: 10px;
     margin-top: 10px;
}

#btn_count_up:hover { background-color:#F30 }
#btn_reset:hover { background-color:#F30 }

<結果サンプル>

カウントアップボタンでカウントアップして、リセットボタンでカウントした数値が0に戻る、シンプルなカウンターが完成しました。

0

※サンプルはページが完全に読み込まれるとt正しく動きます。