Компонент "часы"

https://learn.javascript.ru/widgets-structure

by Артур Бакаев

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id="clock">
    <span>00</span>:<span>00</span>:<span>00</span>
  </p>
  <button id="start">Старт</button>
  <button id="stop">Стоп</button>
  <button onclick="alert('STOP')">Алерт</button>
</body>
</html>

SCSS

body{
  background-color: #f6f6f6;
}
#clock{
  padding: 20px;
  span{
    &:nth-child(1){
      color: #FFDD00;
    }
    &:nth-child(2){
      color: #B34EE9;
    }
    &:nth-child(3){
      color: #29C270;
    }
  }
}

JavaScript

function Clock(options){
 var elem = options.elem, timer;
 
 function tick(){
 	var date = new Date();
  seconds = date.getSeconds();
  minutes = date.getMinutes();
  hours = date.getHours();
  elem.querySelector('span:nth-child(1)').innerHTML = hours > 9 ? hours : '0'+hours;
  elem.querySelector('span:nth-child(2)').innerHTML = minutes > 9 ? minutes : '0'+minutes;
  elem.querySelector('span:nth-child(3)').innerHTML = seconds > 9 ? seconds : '0' + seconds;
 }
 
 function start(){
  tick();
 	timer = setInterval(tick,1000);
 }
 
 function stop(){
 	clearInterval(timer);
 }
 
 this.start = start;
 this.stop = stop;
}

var clock = new Clock({
	elem: document.getElementById('clock')
});

document.getElementById('start').onclick = clock.start;
document.getElementById('stop').onclick = clock.stop;