Javascript setIntervalとsetTimeoutについて

udemyのこの講座おすすめです。 教えるのにとてもいい。

https://www.udemy.com/html-css-js/

できるものはこんなイメージ

point_1 start_time とnowで現在時刻とボタン押下時の時間を取得

point_2 その差を表示

point_3 start stop ボタンの切り替えをif 文

その際に if (this.innerHTML === 'START')
で条件分岐

point_4 表示の変更

        this.innerHTML = 'STOP';
        this.classList.remove('btn-primary');
        this.classList.add('btn-danger');

point_5 setInterval(goTimer, 10);

第2引数で指定した間隔で（ミリ秒）で表示する 関数

point_6 clearInterval(timer_id);でidを指定

setInterval は戻値がある。それをsetInterval設定時に詰め込んでおくこと

point_7 時間を表示するだけの関数を切り出しておく。

 <p id="timer"></p>

    <div>
      <button id="start_stop" class="btn btn-lg btn-primary">START</button>

    </div>
  </div>
  <script>
    var start_time;
    var timer_id;

//0:5:3と表示されないように10以下の時は前に0をつけて表示
//00:05:03と表示される
    var addZero = function (value) {
      if (value < 10) {
        value = '0' + value;
      }
      return value
    }

    document.getElementById('start_stop').addEventListener('click', function () {

//startボタンの時とそうでない時の条件分岐
      if (this.innerHTML === 'START') {
        start = new Date();
        var mili = start.getTime();

//この間隔で再表示している 戻り地を詰め込んでおく　グローバル変数に
        timer_id = setInterval(goTimer, 10);
        this.innerHTML = 'STOP';
        this.classList.remove('btn-primary');
        this.classList.add('btn-danger');

//そうでない時は(stopの時)
      } else {

        clearInterval(timer_id);
        this.innerHTML = 'START';
        this.classList.remove('btn-danger');
        this.classList.add('btn-primary');
      }
      console.log('haitteinai')

    });

//時間を表示するだけの関数を切り出しておく。
    var goTimer = function () {
      var now = new Date();

      var mili = now.getTime() - start.getTime();
      var seconds = Math.floor(mili / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);

      seconds = seconds - minutes * 60;
      minutes = minutes - hours * 60;

      minutes = addZero(minutes);
      seconds = addZero(seconds);
      hours = addZero(hours);

      document.getElementById('timer').innerHTML =
        hours + ':' + minutes + ':' + seconds;
    }

  </script>