통합검색

Javascript

남아있는 시간 카운트다운

  • 2025.04.02 11:01:28
[!]html[/!]
<div class="countdown">08:24:40</div>


[!]jquery[/!]
function countdown(targetDate) {
    var end = new Date(targetDate).getTime();
    var timer = setInterval(function() {
        var now = new Date().getTime();
        var distance = end - now;
        if (distance < 0) {
            $('.countdown').html("종료됨");
            clearInterval(timer);
            return;
        }
        var d = Math.floor(distance / (1000 * 60 * 60 * 24));
        var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((distance % (1000 * 60)) / 1000);
        $('.countdown').html(
            // (d<10?'0'+d:d)+'일 '+
            (h<10?'0'+h:h)+':'+
            (m<10?'0'+m:m)+':'+
            (s<10?'0'+s:s)+''
        );
    }, 50);
}
countdown('2025-04-10T00:00:00+09:00');//종료일



이벤트 진행을 라인으로 표기

[!]html[/!]
<div class="line"><span></span></div>



[!]jquery[/!]
// 라인 퍼센트 적용
function lineper() {
    var $wrap = $('.line_1');
    var start = new Date('2025-04-01T00:00:00+09:00').getTime();//이벤트 시작일
    var end = new Date('2025-04-07T00:00:00+09:00').getTime();//종료일 (이벤트 종료일 과동일하게 설정)
    setInterval(() => {
        var now = new Date().getTime();//실시간 date
        var per = Math.floor((now - start) * 100 / (end - start)); //진행율
        // console.log(per);
        $wrap.find('span').css('width', per+'%'); //진행 라인 width 적용
        $wrap.find('span').text(per+'%'); //텍스트 적용
    }, 50);
}
lineper();