倒計時功能在很多場合都會用到，便捷的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);
});注意：
您可能需要引入Jquery.js
