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);
});

注意:

您可能需要引入Jquery.js

Jquery版JS倒计时 - JS笔记-Npcink
Jquery版JS倒计时 - JS笔记-Npcink

怎么引入jquery.js? - wordpress开发

当下紧跟潮流的wordpress已经集成了全套的jquery库与其他子库,方便我们开发主题或是插件时可以方便的调用wordpress自带的jquery库
Jquery版JS倒计时 - JS笔记-Npcink
Jquery版JS倒计时 - JS笔记-Npcink

简单的JS倒计时 - JS笔记

一个比较常用的功能了,可以用来进行时间的提醒,可以用在一些提示更新、商品促销等地方
2020-05-29
js

怎么使用html数学公式显示库MathJax - js笔记

2020-5-26 22:38:05

js

intro.js - 网站引导页插件

2020-9-22 2:49:52

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索