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

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

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

＜設計＞

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

１．カウント表示部・・・div要素
２．カウントアップボタン・・・button要素
３．リセットボタン・・・button要素

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

＜HTMLソース＞

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

＜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 }