통합검색

Javascript

[Javascript] 특정 시간 까지의 남아있는 시간 카운트다운

  • 2022.12.13 15:11:13


javascript로 오늘을 기준으로 특정 시간까의 남아있는 시간을 카운트다운하는 코드.
html로 빈 엘리먼트를 하나 만들어 두고 script를 통해 엘리먼트 내부에 남아있는 시간을 계산하여 html을 조합하여 넣어주는 간단한 방식이다.


[!]HTML[/!] 
<div class="count"></div>

[!]Javascript[/!] 
<script>
CountDownTimer('01/01/2019 00:00 AM');

function CountDownTimer(dt)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        if(days<10){ days = '0' + days; }
        if(hours<10){ hours = '0' + hours; }
        if(minutes<10){ minutes = '0' + minutes; }
        if(seconds<10){ seconds = '0' + seconds; }

        days = days.toString();
        hours = hours.toString();
        minutes = minutes.toString();
        seconds = seconds.toString();

        var date = new Array();
        date[0] = days.substring(0,1);
        date[1] = days.substring(1,2);
        date[2] = hours.substring(0,1);
        date[3] = hours.substring(1,2);
        date[4] = minutes.substring(0,1);
        date[5] = minutes.substring(1,2);
        date[6] = seconds.substring(0,1);
        date[7] = seconds.substring(1,2);

        var html = '';
        html += '<span>'+date[0]+'</span>';
        html += '<span>'+date[1]+'</span>';

        html += '일 ';

        html += '<span>'+date[2]+'</span>';
        html += '<span>'+date[3]+'</span>';

        html += '시간 ';

        html += '<span>'+date[4]+'</span>';
        html += '<span>'+date[5]+'</span>';

        html += '분 ';

        html += '<span>'+date[6]+'</span>';
        html += '<span>'+date[7]+'</span>';

        html += '초 ';

        matches = document.getElementsByClassName('count');
        matches[0].innerHTML = html;

    }

    timer = setInterval(showRemaining, 1000);
}
CountDownTimer('01/01/2050 00:00 AM'); // 오늘 날짜
</script>


[!]결과 미리보기[/!] 
1초 마다 .count 엘리먼트 내부에 innerHTML 되는 것을 확인할 수 있다.
리스트