<div class="container">
  <p id="timer">00:00:00:00</p>
  <div>
    <button id="start_stop" class="btn-blue">START</button>
  </div>
</div>
<script>
  var start;// グローバル変数にしている。
  var timer_id;

  document.getElementById('start_stop').addEventListener('click', function() {
    if (this.innerHTML === 'START'){
      start = new Date();
      timer_id = setInterval(goTimer, 10); // ここで返って来たIDを利用して↓

      this.innerHTML = 'STOP'; // this = document.getElementById('start_stop')
      this.classList.remove('btn-blue');
      this.classList.add('btn-red');
    } else {
      clearInterval(timer_id); // ここで止める。
      this.innerHTML = "START";
      this.classList.remove('btn-red');
      this.classList.add('btn-blue');
    }
  });

  var addZero = function(value){
    if (value < 10) {
      value = '0' + value;
    }
    return value;
  }

  var goTimer = function(){
    var now = new Date();

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

    milli   = Math.floor((milli - seconds * 1000)/10);
    seconds = seconds - minutes * 60;
    minutes = minutes - hours * 60;

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

    document.getElementById('timer').innerHTML = hours + ":" + minutes + ":" + seconds + ":" + milli;
  }
</script>
<style>
.container {
  text-align: center;
  margin: 30px auto;
}

/*idは #で指定する。*/
#timer {
  font-size: 36px;
  border: 1px solid #ccc;
  margin 30px auto;
  padding: 50px;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}

.btn-blue {
  background-color: rgba(68, 122, 178);
  color: #fff;
  padding: 10px;
  border-radius: 3px;
}

.btn-red {
  background-color: rgb(252, 92, 84);
  color: #fff;
  padding: 10px;
  border-radius: 3px;
}
</style>