Jquery版JS倒计时 - JS笔记

倒计时功能在很多场合都会用到，便捷的Jquery为倒计时功能带来了更多可能性，一起来看看吧

倒计时功能在很多场合都会用到，便捷的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);
});