Component - Clock

by Alexey

HTML

<div id="clock" class="clock">
  <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>

<script>
  class Clock {
    constructor({
      elem
    }) { // var elem = options.elem
      this.elem = elem;
    }
    start() {
      this.tick();
      this._timerId = setInterval(() => this.tick(), 1000);
    }
    tick() {
      let date = new Date();
      // 00 01 02 03 04 011
      this.elem.querySelector('.hour').innerHTML = ('0' + date.getHours()).slice(-2);
      this.elem.querySelector('.min').innerHTML = ('0' + date.getMinutes()).slice(-2);
      this.elem.querySelector('.sec').innerHTML = ('0' + date.getSeconds()).slice(-2);
    }

    stop() {
      clearInterval(this._timerId);
    }
  }
  var pageClock = new Clock({
    elem: document.getElementById('clock')
  });

</script>


<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">

<input type="button" onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')" value="alert для проверки корректного возобновления">

CSS

.clock .hour {
   color: green
 }
 
 .clock .min {
   color: blue
 }
 
 .clock .sec {
   color: red
 }