특정 일 까지 카운트 다운 (남은 일:시간:분:초)

Digital-Countdown-Clock-jQuery.zip

0.01MB

 

 

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="countdown-timer.js"></script>


<style>
.countdown-timer-wrapper .timer {
   padding: 10px;
   text-align: center;
}

.countdown-timer-wrapper .timer .timer-wrapper {
   display: inline-block;
   width: 110px;
   padding: 10px;
}

.countdown-timer-wrapper .timer .timer-wrapper .time {
   font-size: 62px;
   font-weight: bold;
   color: #ffffff;
}

.countdown-timer-wrapper .timer .timer-wrapper .text {
   font-size: 22px;
   color: rgba(255, 255, 255, 0.6);
}

</style>


<div class="countdown-timer-wrapper">
    <div class="timer" id="countdown"></div>
</div>


<script>
    $(document).ready(function () {
		
        //오늘부터 특정일 후
        //var myDate = new Date();
        //myDate.setDate(myDate.getDate() + 4);

        //특정 일자 까지 카운트
        var myDate = new Date('2021/05/31 23:59:59');
        myDate.setDate(myDate.getDate());

        $("#countdown").countdown(myDate, function (event) {
            $(this).html(
                event.strftime(
                    '<div class="timer-wrapper"><div class="time">%D</div><span class="text">days</span></div><div class="timer-wrapper"><div class="time">%H</div><span class="text">hrs</span></div><div class="timer-wrapper"><div class="time">%M</div><span class="text">mins</span></div><div class="timer-wrapper"><div class="time">%S</div><span class="text">sec</span></div>'
                )
            );
        });

    });
</script>

                
                
                
                
                
                
                
                

 

 

www.jqueryscript.net/time-clock/Digital-Countdown-Clock-jQuery.html

Easy Digital Countdown Clock Plugin With jQuery