[JS] JavaScript でストップウォッチを作る

JavaScript でストップウォッチを作ってみます。動くサンプルはこちら。

先にHTML部分です。div部分がクリックされたら stopWatch が実行されます。開始・停止・リセットのボタンを別に用意するのは使い勝手が良くないので、クリックできる部分は１つとします。

<div style="text-align: center; width: 100%;">
    <div id="time" onclick="stopWatch()">00:00.00</div>
</div>

開始・停止・リセットのボタンを用意しない代わりに、ステータスで判断しています。

function stopWatch() {
    // 現在時刻
    startTime = Date.now()
    // timeStatus は 0:初期 1:実行中 2:停止中 の状態としています
    if (timerStatus === 0) {
        // 0:初期 でクリックした場合は updateTime を実行
        updateTime()
        timerStatus = 1
    } else if (timerStatus === 1)  {
        // 1:実行中 でクリックした場合は clearTimeout でタイマー処理を停止します
        clearTimeout(timer)
        timerStatus = 2
    } else if (timerStatus === 2) {
        // 2:停止中 でクリックした場合は 表示されている値をゼロにリセットします
        showTime.innerHTML = '00:00.00'
        timerStatus = 0
    }
}

時間が更新されていくタイマー表示の部分です。

function updateTime() {
    // setTimeout で 10msecごとに実行します
    // timer という名前で設定し、停止する際に指定します
    timer = setTimeout(function() {
        // 「現在日時 - スタート時の日時」を引き、表示する時間を算出します
        elapsedTime = Date.now() - startTime;
        // toISOString で表示する時間フォーマットにして必要な部分だけを抜き出します
        showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 22);
        updateTime()
    }, 10);
}

全体のコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Stop Watch</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" rel="stylesheet">
    <style>
        #time {
            display: inline-block;
            font-size: 40px;
            padding: 10px 10px;
            border-radius: 10px;
            color: #000;
            background-color: #CCC;
        }
    </style>
</head>
<body>
<div style="text-align: center; width: 100%;">
    <div id="time" onclick="stopWatch()">00:00.00</div>
</div>
<script>
    let startTime;
    let elapsedTime = 0
    let timer
    let timerStatus = 0
    showTime = document.getElementById("time");
    function stopWatch() {
        startTime = Date.now()
        if (timerStatus === 0) {
            updateTime()
            timerStatus = 1
        } else if (timerStatus === 1)  {
            clearTimeout(timer)
            timerStatus = 2
        } else if (timerStatus === 2) {
            showTime.innerHTML = '00:00.00'
            timerStatus = 0
        }
    }

    function updateTime() {
        timer = setTimeout(function() {
            elapsedTime = Date.now() - startTime;
            showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 22);
            updateTime()
        }, 10);
    }
</script>
</body>
</html>

JavaScriptJavaScript

Posted by kidatti