Stopwatch: HTML, CSS, JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stopwatch</title>
        <link rel="stylesheet" href="stopwatch.css">
    </head>
    <body>

        <div class="stopwatch">

		<div class="display">
                <span class="hours">00</span><span class="minutes">00</span><span class="seconds">00</span><span class="centiseconds">00</span>
            </div>

            <div class="controls">
                <button class="start">Start</button>
                <button class="stop">Stop</button>
                <button class="reset">Reset</button>
            </div>

        </div>

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

//CSS

.stopwatch {
  width: 500px;
  height: 200px;
  background-color: #000;
  border-radius: 5px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.15);
  padding: 100px;
}

.stopwatch, .stopwatch * {
  transition: all 0.15s ease-out;
}

.stopwatch .controls {
  display: flex;
}

.stopwatch .controls button {
  flex-grow: 1;
  margin: 20px 5px 10px 10px;
  padding: 10px 0;
  border-radius: 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.stopwatch .controls button:active {
  margin-bottom: 0;
  margin-top: 4px;
  box-shadow: none;
}

.stopwatch .controls .start {
  background-color: #5d5;
}

.stopwatch .controls .start:hover {
  background-color: #6e6;
}

.stopwatch .controls .stop {
  background-color: #d55;
}

.stopwatch .controls .stop:hover {
  background-color: #e66;
}

.stopwatch .controls .reset {
  background-color: #55d;
}

.stopwatch .controls .reset:hover {
  background-color: #66e;
}

@font-face {
	font-family: 'digital-7';
	src: url('digital-7.ttf');
}


.stopwatch .display {
  margin-left: 150px;
  font-size: 50px;
  width: 100px;
  color: #fff;
  font-family: 'digital-7', sans-serif;
  margin-top: 10px;

}

.stopwatch .display :not(:last-child):after {
  content: ':';
}

//JavaScript

var ss = document.getElementsByClassName('stopwatch');

[].forEach.call(ss, function (s) {
    var currentTimer = 0,
        interval = 0,
        lastUpdateTime = new Date().getTime(),
        start = s.querySelector('button.start'),
        stop = s.querySelector('button.stop'),
        reset = s.querySelector('button.reset'),

		hrs = s.querySelector('span.hours'),
        mins = s.querySelector('span.minutes'),
        secs = s.querySelector('span.seconds'),
        cents = s.querySelector('span.centiseconds');

    start.addEventListener('click', startTimer);
    stop.addEventListener('click', stopTimer);
    reset.addEventListener('click', resetTimer);

    function pad (n) {
        return ('00' + n).substr(-2);
    }

    function update () {
        var now = new Date().getTime(),
            dt = now - lastUpdateTime;

        currentTimer += dt;

        var time = new Date(currentTimer);

        hrs.innerHTML = pad(time.getHours());
        mins.innerHTML = pad(time.getMinutes());
        secs.innerHTML = pad(time.getSeconds());
        cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));


        lastUpdateTime = now;
    }

    function startTimer () {
        if (!interval) {
            lastUpdateTime = new Date().getTime();
            interval = setInterval(update, 1);
        }
    }

    function stopTimer () {
        clearInterval(interval);
        interval = 0;
    }

    function resetTimer () {
        stopTimer();

        currentTimer = 0;

        hrs.innerHTML = mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
    }
});