JavaScript/Timer のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/Timer へ行く。
- 1 (2026-07-28 (火) 13:59:07)

JavaScript｜Timer

HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介です。

サンプル　→　DEMO

index.html　｜　ページの文書構造

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="sample.js"></script>
        <title>STOPWATCH</title>
    </head>
    <body>
        <div id="time">0.00</div>
        <button id="start">START</button>
        <button id="stop">STOP</button>
        <button id="reset">RESET</button>
    </body>
</html>

style.css　｜　ページのビジュアル

body{
    text-align: center;
}
#time{
    font-size: 72px;
}

sample.js　｜　ページのふるまい

var timerId, startTime, elapsedTime = 0;
var startBtn, stopBtn, resetBtn, timeDisplay;

window.onload = function(){
    startBtn = document.getElementById('start');
    stopBtn = document.getElementById('stop');
    resetBtn = document.getElementById('reset');
    timeDisplay = document.getElementById('time');
    startBtn.addEventListener("click",startTimer);
    stopBtn.addEventListener("click",stopTimer);
    resetBtn.addEventListener("click",resetTimer);
    setBtnState(true,false,false);
}

function startTimer() {
    setBtnState(false,true,false);
    startTime = Date.now();
    timerId = setInterval(update,10);
}

    function update(){
         var t = Date.now() - startTime + elapsedTime;
         timeDisplay.innerHTML = (t/1000).toFixed(2);
    }

function stopTimer(){
    setBtnState(true,false,true);
    elapsedTime = Date.now() - startTime + elapsedTime;
    clearInterval(timerId);
}

function resetTimer() {
    setBtnState(true,false,false);
    timeDisplay.innerHTML = '0.00';
    elapsedTime = 0;
}

function setBtnState(start,stop,reset){
    startBtn.disabled = !start;
    stopBtn.disabled = !stop;
    resetBtn.disabled = !reset;
}

3つのボタンを置いて、それぞれにクリックされたときの動作を定義する・・というシンプルなものです。外部変数を使っています。他のスクリプトとの併用にはご注意下さい。

Date.now()で現在時刻と経過時間を取得
現在時刻は Date.now()という関数で、UTC（協定世界時）での 1970 年 1 月 1 日 00 時 00 分 00 秒から現在までの経過ミリ秒が与えられます。
タイマーの表示　＝　現在時刻 - startBtnが押された時刻　が基本です。
このサンプルでは、一旦ストップした後も続けて計測できるよう、経過時間を累積するようにしているので、
タイマーの表示　＝　現在時刻 - startBtnが押された時刻＋累積経過時間
で計算しています。

setInterval 関数による表示の更新
動きは、setInterval 関数で、10ミリ秒ごとに表示を更新するルーチンを呼び出すことで実現しています。
```
timerID = window.setInterval( function, delay );
function : delay ミリ秒後に実行したい関数。
delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
```

clearInterval 関数による更新の停止
この関数で、setInterval による呼び出しをストップしています。
タイマーは複数使えるので、 timerIDでそれらを識別管理します。この場合はsetInterval を設定したときのIDを持つタイマーをストップしています。

toFixedメソッドによる小数点以下の桁数指定
例えば、対象の数値が 1234.543
toFixed(0) ＞ 1235
toFixed(1) ＞ 1234.5
toFixed(2) ＞ 1234.54 　・・・となります。

startBtn.disabled = !start;
これは、わかりにくい書き方ですが、
start が trueの場合、disabled（無効）が !true = false。つまりボタンは有効
start が falseの場合、disabledが !false = true。つまりボタンは無効
ということで、状況に応じて、３つのボタンをそれぞれ、有効にするか無効にするかを決めています。

JavaScript｜Timer

サンプル → DEMO

サンプル　→　DEMO