jQuery倒计时代码(超简单)

下面是对“jQuery倒计时代码(超简单)”的详细讲解攻略：

1.倒计时实现原理

倒计时的核心是通过 JavaScript 操作 DOM 元素，将倒计时的数字显示在页面上，并且在每一秒中更新显示的数字，从而实现倒计时的效果。jQuery 提供了方便操作 DOM 元素的接口，使得倒计时的实现变得非常简单。

2.实现步骤

第一步，引入 jQuery 库文件。可以在页面的 head 中引入：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

第二步，创建一个 HTML 元素用于显示倒计时。可以在页面中创建一个 div 元素：

<div id="countdown"></div>

第三步，编写 JavaScript 代码。首先获取当前的日期和截止日期，计算时间差，然后按照格式显示时间差：

$(function(){
    var endtime=new Date("2022/1/1,0:0:0");//倒计时到2022年1月1日0点0分0秒
    var nowtime=new Date();
    var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
    var d=parseInt(lefttime/(24*60*60));
    var h=parseInt(lefttime/(60*60)%24);
    var m=parseInt(lefttime/60%60);
    var s=parseInt(lefttime%60);
    $("#countdown").html(d+"天"+h+"小时"+m+"分"+s+"秒");
});

第四步，定时刷新时间，实现倒计时效果。可以使用 setInterval 函数定时更新：

setInterval(function(){
    var endtime=new Date("2022/1/1,0:0:0");
    var nowtime=new Date();
    var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
    var d=parseInt(lefttime/(24*60*60));
    var h=parseInt(lefttime/(60*60)%24);
    var m=parseInt(lefttime/60%60);
    var s=parseInt(lefttime%60);
    $("#countdown").html(d+"天"+h+"小时"+m+"分"+s+"秒");
},1000);

3.示例说明

示例一

在页面中添加如下代码：

<div id="countdown"></div>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
    var endtime=new Date("2022/1/1,0:0:0");
    var nowtime=new Date();
    var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
    var d=parseInt(lefttime/(24*60*60));
    var h=parseInt(lefttime/(60*60)%24);
    var m=parseInt(lefttime/60%60);
    var s=parseInt(lefttime%60);
    $("#countdown").html(d+"天"+h+"小时"+m+"分"+s+"秒");
    setInterval(function(){
        var endtime=new Date("2022/1/1,0:0:0");
        var nowtime=new Date();
        var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
        var d=parseInt(lefttime/(24*60*60));
        var h=parseInt(lefttime/(60*60)%24);
        var m=parseInt(lefttime/60%60);
        var s=parseInt(lefttime%60);
        $("#countdown").html(d+"天"+h+"小时"+m+"分"+s+"秒");
    },1000);
});
</script>

运行后可以看到页面中显示的时间为距离 2022 年 1 月 1 日的时间差，以倒计时的方式显示，并且每隔 1 秒钟更新一次。

示例二

在页面中添加如下代码：

<div id="countdown"></div>
<button id="start">开始倒计时</button>
<button id="stop">停止倒计时</button>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script>
var timer=null;
$(function(){
    $("#start").click(function(){
        timer=setInterval(function(){
            var endtime=new Date("2022/1/1,0:0:0");
            var nowtime=new Date();
            var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
            var d=parseInt(lefttime/(24*60*60));
            var h=parseInt(lefttime/(60*60)%24);
            var m=parseInt(lefttime/60%60);
            var s=parseInt(lefttime%60);
            $("#countdown").html(d+"天"+h+"小时"+m+"分"+s+"秒");
        },1000);
    });
    $("#stop").click(function(){
        clearInterval(timer);
    });
});
</script>

这段代码中，除了增加了两个按钮外，其余的代码与示例一相同。添加的两个按钮分别用于开始和停止倒计时。点击开始按钮后，用 setInterval 函数开启倒计时；点击停止按钮后，用 clearInterval 函数停止倒计时。该示例可以实现倒计时的暂停和继续功能。

以上就是“jQuery倒计时代码(超简单)”的详细讲解攻略，希望对您有所帮助。