본문 바로가기
javascript

jquery 카운트 다운

by 정쬬 2023. 1. 17.

 

 

<meta charset="utf-8">

<div id="countdown"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript">

    let today = new Date();
    let year = today.getFullYear(); // 년도
    let month = today.getMonth() + 1; // 월
    let date = today.getDate() + 1; // 날짜
    dt = month + '/' + date + '/' + year;

    var end = new Date(dt);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;
    var i = 9;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'END!'; // 종료시
            return;
        }
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        if (i == 0) {
            i = 9;
        }
        $('#countdown').html(numberPad(hours, 2) + ' : ' + numberPad(minutes, 2) + ' : ' + numberPad(seconds, 2));
    }

    // 숫자 0~9 앞에 0 붙여주기
    function numberPad(n, width) {
        n = n + '';
        return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
    }

    showRemaining();
    timer = setInterval(showRemaining, 70);
</script>

'javascript' 카테고리의 다른 글

[jquery] ajax 실행 취소  (0) 2023.09.22