[JavaScript] 자바스크립트에서 카운트다운 만들기

086_자바스크립에서 카운트다운 만들기

[적용]

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

---

[문법]

메소드	의미
setInterval(함수, 밀리초)	밀리초 후 함수 실행

---

[내용]

시간의 차이를 계산하여 카운트 다운을 만들어 보자.

setInterval()은 지정한 밀리초마다 함수를 실행한다.

목표 시간과 경과 시간의 차를 구하여 카운트다운을 처리해 보자.

const totalTime = 10000; // 10초
const oldTime = Date.now();

const timerId = setInterval(() => {
    const currentTime = Date.new();
    // 시간의 차를 구함
    const diff = currentTime - oldTime;
    
    // 남은 밀리초 계산
    const remainMSec = totalTIme - diff;
    // 밀리초를 정수의 초 단위로 변환
    const remainSec = Math.ceil(remainMSec / 1000);
    
    let label = `남은 시간 ${remainSec}초`;
    
    // 0초 이하의 처리 작업
    if (remainMSec <== 0) {
        // 타이머를 종료
        clearInterval(timerId);
        
        // 타이머 종료를 표시
        label = '종료';
    }
    // 화면에 표시
    document.querySelector('#log').innerHTML = label;
}, 1000);

 

---

 

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김