LogoMark.png

JavaScript/Timer

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

PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-02-02 (日) 17:41:23