자바스크립트로 카운트다운하기

자바스크립트로 카운트다운하기

자바스크립트로 카운트다운하기 / 이미지 출처 : 데어무드

 

1. 자바스크립트

function updateTimer() {
    const dday = Date.parse("2023/11/19 12:30:00");
    const now = new Date();
    const diff = dday - now;

    const day = Math.floor(diff/(1000 * 60 * 60 * 24));
    const hour = Math.floor(diff/(1000 * 60 * 60));
    const min = Math.floor(diff/(1000 * 60));
    const sec = Math.floor(diff/1000);

    const d = days;
    const h = hour - day * 24;
    const m = min - hour * 60;
    const s = sec - min * 60;
    document.getElementById("Day").innerHTML = d;
    document.getElementById("Hour").innerHTML = h;
    document.getElementById("Min").innerHTML = m;
    document.getElementById("Sec").innerHTML = s;
}

//카운트다운 실행 : 1초마다 갱신
setInterval(updateTimer, 1000);

 

2. HTML

<span id="Day"></span>일
<span id="Hour"></span>시
<span id="Min"></span>분
<span id="Sec"></span>초
남았습니다.

 

1초마다 남은 시간이 갱신된다.

0일 남은 경우 "0일 ... 남았습니다." 라고 표시된다.

끝.

 

 

반응형