[책] 자바스크립트 코드 레시피 278 - 78일차

카운트 다운

• 제한 시간을 지정하여 카운트 다운하고 싶을 때

구문

setInterval(function(){}, 1000) // 밀리초 후 함수 실행

실습

시간의 차이를 계산하여 카운트 다운을 만들어 봅니다. setInterval() 은 지정한 밀리초마다 함수를 실행합니다. 목표 시간과 경과 시간의 차를 구하여 카운트 다운을 처리해봅니다.

index.html

<p class="count"></p>

script.js

window.onload = function() {

    const countElement = document.querySelector('.count');
    console.log(countElement);

    const totalTime = 10000 // 10초
    const oldTime = Date.now();
    console.log(oldTime);
    
    const timerID = setInterval(function() {
        const currentTime = Date.now();
        const diff = currentTime - oldTime; // 시간의 차를 구함
        const remainMsec = totalTime - diff; // 남은 밀리초 계산
        const remainSec = Math.ceil(remainMsec / 1000); // 밀리초를 정수의 초 단위로 변환
        // console.log(`남은 시간 ${remainSec}초`);
        countElement.innerText = `남은 시간 ${remainSec}초`;
        if (remainMsec <= 0) { // 0초 이하의 처리 작업
            clearInterval(timerID); // setInterval() 함수 종료
            console.log('타이머 종료');
        }
    }, 1000);

}