JavaScriptでタイマー機能を作ろう（ドットインストールから引用）

ドットインストールを参考にしてます。
https://dotinstall.com/
※プレミアム会員のみ閲覧可能

# 完成イメージ
<img width="458" alt="スクリーンショット 2019-04-24 16.23.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114933/e9f38f75-479b-fe0e-e2ff-19d91051bb68.png">

```html:index.html
  <div class="container">
    <div id="timer">00:00.000</div>
      <div class="controls">
        <!-- <button id="min">Min</button>
        <button id="sec">Sec</button>
        <button id="reset">Reset</button>
        <button id="start">Start</button> -->
        <div id="min">Min</div>
        <div id="sec">Sec</div>
        <div id="reset">Reset</div>
        <div id="start">Start</div>
      </div>
  </div>
<script type="text/javascript">
  'use strict'

  let timer = document.getElementById('timer');
  let min = document.getElementById('min');
  let sec = document.getElementById('sec');
  let reset = document.getElementById('reset');
  let start = document.getElementById('start');

  // タイマーに関するプロパティを宣言
  let startTime;
  let timeLeft;
  // 基本、秒数はミリ秒単位で考える
  let timeToCountDown = 0
  let timerId;
  let isRunning = false;

  function countDown(){
    timerId = setTimeout(function(){
      // 残り時間　＝　設定したタイマー時間 - (今の時間 - スタートした時間)
      timeLeft = timeToCountDown - (Date.now() - startTime);
      // ===で実装しない理由は、誤差で、0秒ピッタリで評価できないから
      if(timeLeft < 0){
        isRunning = false;
        start.textContent = "Start";
        clearTimeout(timerId);
        timeLeft = 0;
        timeToCountDown = 0;
        // ちゃんと0を表示するように、ここで明示してあげる
        updateTimer(timeLeft);
        // ここでreturnしないと、下の処理を続けてしまう
        return
      }
      updateTimer(timeLeft)
      countDown();
    },10);
  }

  // ミリ秒を渡すと分や秒に直してくれる関数を作成
  function updateTimer(t){
    // Dateオブジェクトを生成
    let d = new Date(t);

    let m = d.getMinutes();
    let s = d.getSeconds();
    var ms = d.getMilliseconds();
    // よく使うテクニック
    m = ('0' + m).slice(-2);
    s = ('0' + s).slice(-2);
    ms = ('00' + ms).slice(-3);
    let timerString = m + ":" + s + "." + ms;
    timer.textContent = timerString;
    // タイトルに残り時間を設定
    document.title = timerString;
  }


  //startボタンを押した際のイベントを設定
  start.addEventListener("click", function(){
    //この書き方は多用させる
    if (isRunning === false){
      isRunning = true;
      start.textContent = "Stop";
      startTime = Date.now();
      countDown();
    }else{
      isRunning = false;
      start.textContent = "Start";
      timeToCountDown = timeLeft;
      clearTimeout(timerId);
    }

  });

  //minボタンを押した際のイベントを設定
  min.addEventListener("click", function(){
    if (isRunning === true) {
      return;
    }
    timeToCountDown += 60 * 1000;
    // 60分を超えて操作しようとしたら、0に戻す
    if (timeToCountDown >= 60 * 60 * 1000) {
      timeToCountDown = 0;
    }
    updateTimer(timeToCountDown);
  });

  //secボタンを押した際のイベントを設定
  sec.addEventListener("click", function(){
    if (isRunning === true) {
      return;
    }
    timeToCountDown += 1000;
    if (timeToCountDown >= 60 * 60 * 1000) {
      timeToCountDown = 0;
    }
    updateTimer(timeToCountDown);
  });

  reset.addEventListener("click", function(){
    timeToCountDown = 0;
    updateTimer(timeToCountDown);
  });
</script>
```

```css
.container {
  margin: 20px auto;
  width: 365px;
  background: #fff;
  padding: 15px;
  text-align: center;
}

#timer {
  background: #ddd;
  height: 120px;
  line-height: 120px;
  font-size: 40px;
  margin-bottom: 15px;
}


/*flex使うと、めっちゃ楽*/
.controls{
  display: flex;
  justify-content:space-between;
}

.controls > div {
  cursor: pointer;
  user-select: none;
  width: 80px;
  background: #ddd;
  height: 45px;
  line-height: 45px;
}

/*高さを計算できるようにoverflow: hidden;を指定する*/
.controls {
  overflow: hidden;
}
/*
// 隣接セレクターで指定
.controls > div + div {
  margin-left: 15px;
}*/

.controls > div:hover {
  opacity: 0.7;
}
```