san9dev/stopwatch.html

## stopwatch.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>stopwatch in JS</title>
  <style type="text/css">
    body{
      background: #2d2d2d;
      color: #f6f6f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 100vh;
    }

    .stopwatch {
      font-size: 5em;
      font-family: monospace;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
      padding: 10px 0;
    }

    /**
      * Сброс стилей у кнопки.
    */
    button {
      padding: 0;
      border: none;
      font: inherit;
      color: inherit;
      background-color: transparent;
    /* отображаем курсор в виде руки при наведении; некоторые
      считают, что необходимо оставлять стрелочный вид для кнопок */
      cursor: pointer;
    }

    .btn {
      margin: 2px 0;
      border: solid 1px transparent;
      border-radius: 4px;
      padding: 0.5em 1em;
      color: #ffffff;
      background-color: #9555af;
      font-family: monospace;
    }

  </style>
</head>
<body>
  <div class="controls">
    <button class="btn"  onclick="start()">Start</button>
    <button class="btn"  onclick="pause()">Pause</button>
    <button class="btn"  onclick="stop()">Stop</button>
    <button class="btn"  onclick="restart()">Restart</button>
    <button class="btn"  onclick="lap()">Lap</button>
    <button class="btn"  onclick="resetLaps()">Reset laps</button>
  </div>
  <div class="stopwatch">00:00:00</div>
  <ul class="laps"></ul>
  <script type="text/javascript">
    var ms = 0, s = 0, m = 0;
    var timer;

    var stopwatchEl = document.querySelector('.stopwatch');
    var lapsContainer = document.querySelector('.laps');

    function start() {
      if(!timer) {
        timer = setInterval(run, 10);
      }
    }

    function run(){
      stopwatchEl.textContent = getTimer();
      ms++;
      if(ms == 100) {
        ms = 0;
        s++;
      }
      if(s == 60) {
        s = 0;
        m++;
      }
    }

    function pause() {
      stopTimer();
    }

    function stop() {
      clearInterval(timer);
      timer = false;
      ms = 0;
      s = 0;
      m = 0;
      stopwatchEl.textContent = getTimer();
    }

    function stopTimer() {
      clearInterval(timer);
      timer = false;
    }

    function getTimer() {
      return (m < 10 ? + "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
    }

    function restart() {
      stop();
      start();
    }

    function lap() {
      if(timer) {
        var li = document.createElement('li');
        li.innerText = getTimer();
        lapsContainer.appendChild(li);
      }
    }

    function resetLaps() {
      lapsContainer.innerHTML = '';
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>stopwatch in JS</title>
	<style type="text/css">
	body{
	background: #2d2d2d;
	color: #f6f6f6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100vh;
	}

	.stopwatch {
	font-size: 5em;
	font-family: monospace;
	}

	ul {
	margin: 0;
	padding: 0;
	}

	ul li {
	list-style: none;
	padding: 10px 0;
	}

	/**
	* Сброс стилей у кнопки.
	*/
	button {
	padding: 0;
	border: none;
	font: inherit;
	color: inherit;
	background-color: transparent;
	/* отображаем курсор в виде руки при наведении; некоторые
	считают, что необходимо оставлять стрелочный вид для кнопок */
	cursor: pointer;
	}

	.btn {
	margin: 2px 0;
	border: solid 1px transparent;
	border-radius: 4px;
	padding: 0.5em 1em;
	color: #ffffff;
	background-color: #9555af;
	font-family: monospace;
	}

	</style>
	</head>
	<body>
	<div class="controls">
	<button class="btn" onclick="start()">Start</button>
	<button class="btn" onclick="pause()">Pause</button>
	<button class="btn" onclick="stop()">Stop</button>
	<button class="btn" onclick="restart()">Restart</button>
	<button class="btn" onclick="lap()">Lap</button>
	<button class="btn" onclick="resetLaps()">Reset laps</button>
	</div>
	<div class="stopwatch">00:00:00</div>
	<ul class="laps"></ul>
	<script type="text/javascript">
	var ms = 0, s = 0, m = 0;
	var timer;

	var stopwatchEl = document.querySelector('.stopwatch');
	var lapsContainer = document.querySelector('.laps');

	function start() {
	if(!timer) {
	timer = setInterval(run, 10);
	}
	}

	function run(){
	stopwatchEl.textContent = getTimer();
	ms++;
	if(ms == 100) {
	ms = 0;
	s++;
	}
	if(s == 60) {
	s = 0;
	m++;
	}
	}

	function pause() {
	stopTimer();
	}

	function stop() {
	clearInterval(timer);
	timer = false;
	ms = 0;
	s = 0;
	m = 0;
	stopwatchEl.textContent = getTimer();
	}

	function stopTimer() {
	clearInterval(timer);
	timer = false;
	}

	function getTimer() {
	return (m < 10 ? + "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
	}

	function restart() {
	stop();
	start();
	}

	function lap() {
	if(timer) {
	var li = document.createElement('li');
	li.innerText = getTimer();
	lapsContainer.appendChild(li);
	}
	}

	function resetLaps() {
	lapsContainer.innerHTML = '';
	}
	</script>
	</body>
	</html>