JS: Stopwatch

Here's how to write a stopwatch.

Elapsed time: 0.0

Start Stop/Lap Reset

Here's the HTML code:

<p>Elapsed time:
<span id="display29700">0.0</span>
</p>

<button id="start08637">Start</button>
<button id="stop44129">Stop</button>
<button id="reset96523">Reset</button>

Here's the JavaScript code:

"use strict";
{
    var display_ele_1 = document.getElementById("display29700");
    var StartedDateTime_1 = new Date;
    var ElapsedTime_1 = 0;
    var IntvID_1 = null;
    var TimerIsOn_1 = false;
    var TimerUpdateFrequency_1 = 100; // millisecond
    var fstart = (function () {
        StartedDateTime_1 = new Date;
        fdisplay_1("start");
    });
    var fstop = (function () {
        ElapsedTime_1 = Date.now() - StartedDateTime_1.getTime();
        fdisplay_1("stop");
    });
    var freset = (function () {
        ElapsedTime_1 = 0;
        fdisplay_1("stop");
        display_ele_1.firstChild.nodeValue = "0";
    });
    var updateDisplay_1 = (function () {
        display_ele_1.firstChild.nodeValue = ((Date.now() - StartedDateTime_1.getTime()) / 1000).toFixed(2);
    });
    var fdisplay_1 = (function (φstartStop) {
        if (φstartStop === "start") {
            if (TimerIsOn_1 === true) { }
            else {
                TimerIsOn_1 = true;
                IntvID_1 = setInterval(updateDisplay_1, TimerUpdateFrequency_1);
            }
        }
        else {
            if (IntvID_1 !== null) {
                window.clearInterval(IntvID_1);
            }
            TimerIsOn_1 = false;
            updateDisplay_1();
        }
    });
    document.getElementById("start08637").addEventListener("click", fstart, false);
    document.getElementById("stop44129").addEventListener("click", fstop, false);
    document.getElementById("reset96523").addEventListener("click", freset, false);
}

---

Here's ES2015 version in TypeScript.

{

const display_ele = document.getElementById("display29700");

let StartedDateTime = new Date;
let ElapsedTime = 0;
let IntvID = null;
let TimerIsOn = false;
let TimerUpdateFrequency = 100; // millisecond

const fstart = (() => {
    StartedDateTime = new Date;
    fdisplay("start");
})

const fstop = (() => {
    ElapsedTime = Date.now () - StartedDateTime.getTime();
    fdisplay("stop");
});

const freset = (() => {
    ElapsedTime = 0;
    fdisplay("stop");
    display_ele.firstChild.nodeValue = "0";
});

const updateDisplay = (() => {
    display_ele.firstChild.nodeValue = ( (Date.now () - StartedDateTime.getTime()) / 1000 ).toFixed (2);
});

const fdisplay = ((φstartStop) => {
    if (φstartStop === "start") {
        if ( TimerIsOn === true ) {}
        else {
            TimerIsOn = true;
            IntvID = setInterval( updateDisplay , TimerUpdateFrequency);
        }
    } else {
        if (IntvID !== null ) {
            window.clearInterval(IntvID);
        }
        TimerIsOn = false;
        updateDisplay();
    }
});

document.getElementById("start08637").addEventListener("click", fstart , false);

document.getElementById("stop44129").addEventListener("click", fstop , false);

document.getElementById("reset96523").addEventListener("click", freset , false);

}