HTMLを書く

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自作ストップウォッチ</title>
    </head>
    <body>
        <div id="timerLabel">00:00:00</div>
        <button id="startBtn">START</button>
        <button id="stopBtn">STOP</button>
        <button id="resetBtn">RESET</button>

        <script src="main.js"></script>
    </body>
</html>

javascriptを書く

main.js

'use strict';
{   
    var time = 0;
    var timerLabel = document.getElementById('timerLabel');
    var startBtn = document.getElementById('startBtn');
    var stopBtn = document.getElementById('stopBtn');
    var resetBtn = document.getElementById('resetBtn');
    var id;  // setTimeoutから返される値を入れる変数

    // STARTボタン
    function start() {
        // スタートボタンを押せないようにする（これをしないと何回もスタートボタン押せてしまう）
        startBtn.disabled = true;
        // timeをsetTimeoutで設定したミリ秒ごとに1プラスする
        time++;  

        //分・秒・ミリ秒を計算
        var min = Math.floor(time/100/60)
        var sec = Math.floor(time/100);
        var mSec = time % 100;
        // 分・秒・ミリ秒が１桁の場合は、先頭に０をつける
        if (min < 10) min = '0' + min;
        if (sec >= 60) sec = sec % 60; // 秒が60秒以上になった場合の処理（60になったら0になる）
        if (sec < 10) sec = '0' + sec; 
        if (mSec < 10) mSec = '0' + mSec;

        // timerLabelを更新
        timerLabel.innerHTML = min + ':' + sec + ':' + mSec;
        // setTimeoutでstart関数をループさせるイメージ？
        id = setTimeout(start, 10);
    }

    // STOPボタン
    function stop() {
        // 停止する
        clearTimeout(id);
        // スタートボタンを押せるようにする
        startBtn.disabled = false;

    }

    // RESETボタン
    function reset() {
        // 停止する
        clearTimeout(id);
        // タイムを0に戻す
        time = 0;
        // タイマーラベルをリセット
        timerLabel.innerHTML = '00:00:00';
        // スタートボタンを押せるようにする
        startBtn.disabled= false;
    }

    // クリックした時の処理
    startBtn.addEventListener('click', start, false); // STARTボタン
    stopBtn.addEventListener('click', stop, false); // STOPボタン
    resetBtn.addEventListener('click', reset, false); // RESETボタン
}

参考にした記事

javascriptでストップウォッチを作ってみる。忘備録
 【動画・サンプルコード付き】JavaScriptでつくる簡単ストップウォッチ

javascriptで簡単ストップウォッチ

HTMLを書く

javascriptを書く

参考にした記事