[Javascript] 간단한 타이머 (w.setInterval,classList)

노마드 코드 영상을 보고 setinterval을 배우고 타이머도 만들 수 있을 것 같아서 만들어보았다.
setinterval 관련 글

---

html

        <div class="js-timer">
            <h1>10:00</h1>
            <button>timer</button>
        </div>

위와 같이 추가해주었다.

 

timer.js

변수

const timerContaniner = document.querySelector(".js-timer"),
    timerclock = timerContaniner.querySelector("h1"),
    timerBtn = timerContaniner.querySelector("button");

 

html의 요소들을 querySelector를 통해 가져왔다.

 

const CLICKEDTIMER = "clickedTimer";
const INITTIME = timerclock.innerText;

 

또한, reset을 위해 초기 innerText값을 저장해놓았으며, class명을 편하게 쓰기위해 선언해주었다.

 

init함수

function init(){
    timer();
}

init();

먼저 init함수를 만들어주었다.

 

timer 함수

function timer(){
    timerBtn.addEventListener("click",handleTimer);
    setInterval(timerstart,1000);
}

 

addEventListener함수를 통해 html의 버튼이 "click"되었을때 handleTimer 함수를 실행하도록하였으며,
setInterval 함수를 통해 1초마다 timerstart함수를 실행하도록 하였다.

 

handleTimer 함수

function handleTimer(){
    timerBtn.classList.toggle(CLICKEDTIMER)
}

 

addEventListener를 통해 이벤트를 받고 실행되면, classList.toggle을 이용해서 timerBtn에 CLICKEDTIMER class명을 추가해주었다.

 

timerstart 함수

function timerstart(){
    const nowtime = timerclock.innerText;
    if(timerBtn.classList.contains(CLICKEDTIMER)){
        timerBtn.innerText = "reset"
        if (nowtime === "00:00") return
        const arr = nowtime.split(":")
        let timerminutes = arr[0]
        let timerseconds = arr[1]
        if(timerseconds == "00"){
            timerseconds = 59;
            timerminutes = +timerminutes - 1;
            timerclock.innerText = `${timerminutes <10 ? `0${timerminutes}` : timerminutes}:${timerseconds}`
        } else{
            timerseconds = +timerseconds -1;
            timerclock.innerText = `${timerminutes}:${timerseconds <10 ? `0${timerseconds}` : timerseconds}`
        }
    }else{
        timerclock.innerText = INITTIME
        timerBtn.innerText = "timer"
    }
}

• classList를 통해 특정 class명이 contain이 되어있는지 아닌지를 토대로 타이머를 시작하는지, reset을 하는지 구분하게 if문을 구성하였다.
• innerText를 통해 받은 값을 split()을 통해 분과 초로 나누어주었다.
• 00초일때 59초로 가도록 따로 설정해주었다.
• 10이하일때 앞에 0이 붙도록 삼항연산자를 사용해 주었다.
• timerBtn.innerText 를 통해 버튼에 적힌 글자가 변화하도록 해주었다.

결과

아쉬운점

• 초기 타이머값을 html에서 직접 하드코딩으로 변화를 주어야된다.
• 버튼을 하나로해서 일시정지나 부가적인 기능을 구현하지 못했다.
• setInterval함수가 1초마다 실행되므로 반응이 살짝 느릴수 있다.
• 00:00초일때 함수를 아예 종료하지 못했다. - setInterval함수는 계속 도는중이다.