StopWatch

simple JS stopwatch

by s_light

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.min.js"></script>
<div id="time">
00:00:00.000
</div>

<div>
    <button id="start" title="use space-bar to start&stop">
        Start
    </button>
    <button id="stop" title="use space-bar to start&stop">
        Stop
    </button>
    <button id="reset" title="use 'x'-key to reset">
        Reset
    </button>
</div>

CSS

body {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1em;
    font-size:1.3em;
    font-family: Overlock;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    /* night blue */
    color:  hsl(0, 50%, 0%);
    text-shadow:
        0 0 2px hsl(115, 100%, 50%), 
        0 0 3px hsl(115, 100%, 50%), 
        0 0 5px hsl(115, 100%, 50%), 
        0 0 10px hsl(0, 100%, 50%), 
        0 0 10px hsl(115.3, 100%, 50%), 
        0 0 17px hsl(0, 100%, 50%), 
        0 0 20px hsl(0, 100%, 50%), 
        0 0 30px hsla(0, 100%, 50%, 0.5), 
        0 0 40px hsla(0, 100%, 50%, 0.5);
    background-color: rgb(0, 0, 20);
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 80, 0.9) 100%
        ),
        radial-gradient(
            0.9vh at 60% 12%,
            rgba(255, 230, 200, 0.7) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.7vh at 72% 3%,
            rgba(255, 230, 150, 0.6) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 80% 20%,
            rgba(255, 230, 200, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 82% 30%,
            rgba(255, 200, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 89% 20%,
            rgba(255, 230, 150, 0.4) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.9vh at 50% 60%,
            rgba(255, 200, 0, 1) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.9vh at 43% 55%,
            rgba(255, 255, 255, 1) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            1.8vh at 45% 75%,
            rgba(255, 200, 150, 1) 0%,
            rgba(0,...

JavaScript

var running = false;
var time_start = 0;
var timerid;

var time_el = document.querySelector("#time").firstChild;


function start() {
	console.log("start");
    if(running == false) {
    	if(time_start == 0) {
        	reset();
        }
    	running = true;
    	timerid = window.setInterval(update, 100);
    }
}

function reset() {
	console.log("reset");
    time_start = moment();
    update_display();
}

function stop() {
	console.log("stop");
    running = false;
}


function update_display() {
	duration = moment.duration(moment().diff(time_start));
    //console.log("time_start", time_start);
    //console.log("moment()", moment());
    //console.log("duration", duration);
    time_el.nodeValue = duration.format(
        "hh:mm:ss.SSS", 
        {
            trim: false
        }
    );
}

function update() {
	if (running) {
    	update_display();
    } else {
    	window.clearInterval(timerid);
    	timerid = undefined;
    }
}


function handle_key(event) {
 	// console.log(event)
 	if (event.keyCode == 32) {
 		if(running) {
    		stop();
    	} else {
        	start();
    	}
 	}
 	if (event.keyCode == 88) {
    	reset();
 	}
}



document.querySelector("#start").addEventListener('click', start);
document.querySelector("#stop").addEventListener('click', stop);
document.querySelector("#reset").addEventListener('click', reset);

document.addEventListener('keyup', function(event) {
    handle_key(event);
});