Jquery版JS倒計時 – JS筆記

倒計時功能在很多場合都會用到，便捷的Jquery為倒計時功能帶來了更多可能性，一起來看看吧。

• 代碼來源：詳情

HTML代碼：

	 <section class="countdown-container" data-deadline="2025/06/01 12:20:00" data-current="2020/05/28 12:00:00"> 
	  <h3 class="countdown-desc">距離網站正式上線還有：</h3> 
	  <ul class="countdown-content"> 
	   <li> <span class="digits days">00</span> <i>:</i> <span class="label">天</span> </li> 
	   <li> <span class="digits hours">00</span> <i>:</i> <span class="label">時</span> </li> 
	   <li> <span class="digits minutes">00</span> <i>:</i> <span class="label">分</span> </li> 
	   <li> <span class="digits seconds">01</span> <span class="label">秒</span> </li> 
	  </ul> 
	 </section> 

Jquery

jQuery(document).ready(function ($) {
    var deadline = Date.parse( $(".countdown-container").data("deadline") ),
        current = Date.parse( $(".countdown-container").data("current") );
    if (deadline - current <= 0) {
        location.reload(true);
    };
    var x = setInterval(function() {
        var distance =  deadline - current,
            days = Math.floor( distance / (1000 * 60 * 60 * 24) ),
            hours = Math.floor( ( distance / (1000 * 60 * 60) ) % 24 ),
            minutes = Math.floor( (distance / 1000 / 60) % 60 ),
            seconds = Math.floor( (distance / 1000) % 60 );
        $(".digits.days").text(days);
        $(".digits.hours").text( ('0' + hours).slice(-2) );
        $(".digits.minutes").text( ('0' + minutes).slice(-2) );
        $(".digits.seconds").text( ('0' + seconds).slice(-2) );
        current += 1000;
        if (distance <= 0) {
            clearInterval(x);
            location.reload(true);
        };
    }, 1000);
});

注意：

您可能需要引入Jquery.js

怎么引入jquery.js？ – wordpress開發

Muze

• 20年5月19日
• 喜歡：0
• 瀏覽：1.2k

簡單的JS倒計時 – JS筆記

Muze

• 20年5月25日
• 喜歡：0
• 瀏覽：171