자바스크립트를 이용하여 스탑와치 만들기

자바스크립트를 이용하여 스탑와치 만들기

<완성된 페이지의 모습>

https://github.com/minn602/stopwatch-js
(👆 모든 코드는 위에서 확인 가능합니다)

구현하고자하는 기능

1. start btn을 누르면 타이머가 시작되어 1초씩 업데이트 된다.
2. stop btn을 누르면 타이머가 멈추고 현재까지 경과된 시간을 보여준다
3. 다시 start btn을 누르면 경과된 시간에서 또 1초씩 흐른다.
4. reset btn을 누르면 디스플레이는 00:00으로 리셋되고 타임랩에 경과시간을 추가한다.

setInterval()과 clearInterval()

처음에는 시간을 보여주는 기능을 구현하는 것이라 단순히 Date() object를 이용하여 구현하는 것을 생각해서 Date.now()를 이용해 '현재시간 - 함수 실행 후의 시간 = 경과시간'을 계산하는 걸로 해볼려고 했는데 return 값이 ms으로 나오고 경과시간 계산은 수월할거 같지만 그걸 display에 00:00 기준으로 표현하기에는 막막했다.
그래서 설정한 시간 간격으로 함수가 실행되는 setInterval()을 사용하였다. 초기 분, 초 값은 0으로 할당하고 start btn이 눌러지면 초 변수에 1씩 추가되고 그것이 60이 되면 분 변수에 1이 추가되는 if문을 작성하였다.
타이머가 멈추기 위해선 clearInterval()을 사용하였고 parameter에는 intervalId가 전달된다. 이는 setInterval()을 작성하여 할당한 변수명이다.

//setInterval() syntax
var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = scope.setInterval(function[, delay]);
var intervalID = scope.setInterval(code, [delay]);

function stopBtnHandler() {
  const stopBtn = document.querySelector('.stop-btn');
  stopBtn.addEventListener('click', () => {
    clearInterval(intervalId);
  })
  minutes = parseInt(displayArr[0]);
  seconds = parseInt(displayArr[1]);
}

startBtnHandler() 에서 작성된 setInterval()을 할당한 변수인 intervalId를 clearInterval()에 인자로 넣어준다.

타이머를 멈춘 후 다시 시작할 때

start btn을 누르고 시간이 경과하고 stop btn을 눌러 멈추고 다시 start btn을 누르면 기존 시간에서 다시 타이머가 실행되게 하기 위해서는 display의 값을 가져와서 사용하였다.

function startBtnHandler() {
  const startBtn = document.querySelector('.start-btn');
  startBtn.addEventListener('click', () =>{
    intervalId = setInterval(() => {
      if (!parseInt(displayArr[1])) {
        seconds += 1;
        if (seconds > 59) {
          seconds = 0;
          minutes += 1;
        }
        display.innerText = `${minutes < 10 ? `0${minutes}` : minutes}:${
          seconds < 10 ? `0${seconds}` : seconds}`;
      } else {
        seconds = parseInt(displayArr[1]);
        seconds += 1;
        if (seconds > 59) {
          seconds = 0;
          minutes += 1;
        }
        display.innerText = `${minutes < 10 ? `0${minutes}` : minutes}:${
          seconds < 10 ? `0${seconds}` : seconds}`;
      }
    }, 1000)
})
}

전역변수로 선언된 minutes와 seconds 변수들은 값이 0으로 할당되었다. stopBtnHandler에서 stop btn을 누를때의 display값을 각각에 할당해 주고 start btn을 다시 누를때 현재의 display 값에서 시간 추가되어 타이머가 작동하도록 작성하였다.