7-2 QUIZ 스톱워치 만들기

✅ 퀴즈 : 반복문과 조건문을 이용하여 간단한 스톱워치 만들기

#7-1. 반복문과 조건문에서 학습한 내용을 토대로 간단한 스톱워치를 만들어보세요.

HTML

<div>
        <div class="time">
            <span class="minutes">00</span>:
            <span class="seconds">00</span>:
            <span class="tenMillis">00</span>
        </div>
        <div class="btn">
            <button onclick="start()">시작</button>
            <button onclick="stop()">멈춤</button>
            <button onclick="reset()">초기화</button>
        </div>
    </div>

JS

let tenMillis = 0;
let seconds = 0;
let minutes = 0;
let Intervar;
const tenMillisDisplay = document.querySelector('.tenMillis');
const secondsDisplay = document.querySelector('.seconds');
const minutesDisplay = document.querySelector('.minutes');


function start(){
  clearInterval(Intervar);
  Intervar = setInterval(Timer,10);
}

function stop(){
  clearInterval(Intervar);
}

function reset(){
  clearInterval(Intervar);
  tenMillis = 0;
  seconds = 0;
  minutes = 0;
  tenMillisDisplay.innerText = '00';
  tenMillisDisplay.innerText = '00';
  secondsDisplay.innerText = '00';
}

function Timer(){
  tenMillis++;
  tenMillisDisplay.innerText = tenMillis > 9 ?tenMillis :'0'+ tenMillis;
  if( tenMillis > 99 ){
    seconds++;
    secondsDisplay.innerText = seconds > 9 ?seconds :'0'+ seconds;
    tenMillis = 0;
    tenMillisDisplay.innerText = '00';
  }
  if( seconds > 59 ){
    minutes++;
    minutesDisplay.innerText = minutes > 9 ?minutes :'0'+ minutes;
    seconds = 0;
    secondsDisplay.innerText = '00';
  }
}

코드메이트 퀴즈에서는 setTimeout과 clearInterval으로 만들어보라고 하였지만,
setInterval을 사용하여 만들어 보고싶었다.