[Javascript] 카운트다운 만들기

 

이벤트 페이지를 만들경우, 어떤 날짜를 기준으로 카운트다운 하는 UI를 사용할때가 많다.

flip으로 넘어가는것도 아니고 단순하게 카운트 숫자만 바뀌는건데

제이쿼리 플러그인이나 라이브러리를 불러오는것도 불필요해보여서 간단하게 사용할 수 있도록 코드를 남겨본다.

 

var countDateGetTime = new Date(2023, 4, 9, 24, 0, 0).getTime();  // 년, 월-1, 일, 시, 분, 초
var countEl = document.querySelector(".countdown-text");
var countInterval = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDateGetTime - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = ('0' + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    var minutes = ('0' + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    var seconds = ('0' + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);
    if ( days > 0 ) {	// 남은시간이 일까지 포함될경우 '일+시간+분+초'
    	// 숫자 사이에 텍스트를 넣을 수 있음
        countEl.innerHTML =
            days + "<span>Days </span>"
            + hours + "<span>:</span>"
            + minutes + "<span>:</span>"
            + seconds;
    } else {	// 남은시간이 일까지는 안갈경우 '시간+분+초'
        countEl.innerHTML =
            hours + "<span>:</span>"
            + minutes + "<span>:</span>"
            + seconds;
    }

    if (distance < 0) {	// 지정한 시간이 지났을 경우 시간 대신 넣어 줄 텍스트
        clearInterval(countInterval);
        countEl.innerHTML = "EXPIRED";
    }
}, 1000);

 

카운트다운 codepen 화면

 

See the Pen Countdown by jjung (@jjung2) on CodePen.