JavaScript & jQuery & CSS & HTML の達人

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

JavaScript + jQuery でストップウォッチを作る方法

JavaScript + jQuery でストップウォッチを作る

今回は JavaScriptjQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところ。CSSの「Float」と「Clear」の使い方を知っておくと便利です。

動作サンプル

「START」のクリックでスタート、「STOP」で停止、「RESET」をクリックすると「0:00'00''0」にリセットされる。 

0:00'00''0 START STOP RESET

 

HTMLソース

HTMLはとても簡単。4つの「span」タグだけで構成されている。 

<span id="youso1">0:00'00''0</span>
<span id="startbtn1">START</span>
<span id="stopbtn1">STOP</span>
<span id="resetbtn1">RESET</span>

JavaScript + jQueryコード

各ボタンにクリックイベントを設定している。また、1/10秒間隔で関数「panda1()」を実行して表示を更新している。 

var a = 0;
var tm1 = null;

$(function() {
     // スタートボタン
     $("#startbtn1").click(function() {
          if(tm1 == null) { tm1 = setInterval("panda1()",100); }
     });
     // ストップボタン
     $("#stopbtn1").click(function() {
          clearInterval(tm); tm1 = null;
     });
     // リセットボタン
     $("#resetbtn1").click(function() {
          $("#youso1").text("0:00'00''0");
          a = 0;
     });
});

function panda1() {
     a += 1;
     var sec = a % 10;
     var byo = Math.floor(a / 10) % 60;
     var fun = Math.floor(a / 600) % 60;
     var ji = Math.floor(a / 36000) % 60;

     // 時間の表示を更新している
     $("#youso1").text(('0' + ji).slice(-1) + ":" + ('00' + fun).slice(-2) + "'" + ('00' + byo).slice(-2) + "''" + sec);
}

CSS

一番下の赤色文字の部分で各ボタンにマウスカーソルが乗った時のマウスカーソル画像を「手」の形にしている。 

#youso1 {
     background-color: #F06;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     font-size: 24px;
     float: left;
     padding: 5px;
     width: 320px;
}
#startbtn1 {
     background-color: #06C;
     font-size: 24px;
     color: #FFF;
     float: left;
     padding: 5px;
     clear: left;
     width: 100px;
     text-align: center;
}
#stopbtn1 {
     background-color: #F90;
     float: left;
     font-size: 24px;
     color: #FFF;
     padding: 5px;
     text-align: center;
     width: 100px;
}
#resetbtn1 {
     background-color: #09C;
     font-size: 24px;
     color: #FFF;
     float: left;
     padding: 5px;
     text-align: center;
     width: 100px;
}
#startbtn1:hover { cursor:pointer }
#stopbtn1:hover { cursor:pointer }
#resetbtn1:hover { cursor:pointer } 

終わり