jQuery实现最简单实用的分秒倒计时

下面是jQuery实现最简单实用的分秒倒计时的完整攻略。

准备工作

首先需要引入jQuery库文件，可以从官网（https://jquery.com/）上下载或使用CDN，例如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后需要在HTML文件中创建一个用于显示倒计时的容器，例如：

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

实现方法

使用jQuery的setInterval()函数实现计时器功能。这个函数可以每隔一定时间执行一次指定的代码块。在此过程中，我们可以使用JavaScript的Date对象获取当前时间，再与指定的结束时间相比较，来计算出还剩下多少时间。例如：

setInterval(function() {
  var now = new Date().getTime();
  var end_time = new Date("2022-01-01T00:00:00Z").getTime();
  var distance = end_time - now;
  // 计算倒计时时间
}, 1000); // 每隔1秒钟执行一次

根据剩余时间，计算出还剩下多少天、小时、分钟和秒数。例如：

var days = Math.floor(distance / (1000 * 60 * 60 * 24)); // 计算剩余天数
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算剩余小时数
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // 计算剩余分钟数
var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 计算剩余秒数

将计算出来的时间显示在HTML页面中。例如：

$("#countdown").html(days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ");

如果倒计时已经结束，清除计时器并显示提示信息。例如：

if (distance < 0) {
  clearInterval(interval);
  $("#countdown").html("倒计时已结束！");
}

完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery实现最简单实用的分秒倒计时</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="countdown"></div>
    <script>
        var interval = setInterval(function() {
            var now = new Date().getTime();
            var end_time = new Date("2022-01-01T00:00:00Z").getTime();
            var distance = end_time - now;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            $("#countdown").html(days + "天 " + hours + "小时 "
            + minutes + "分钟 " + seconds + "秒 ");

            if (distance < 0) {
                clearInterval(interval);
                $("#countdown").html("倒计时已结束！");
            }
        }, 1000);
    </script>
</body>
</html>

示例说明

以下是两个示例说明：

示例1

假设需要在网站首页上倒计时到2022年1月1日。可以在HTML文件中添加如下代码：

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

然后在JavaScript文件中添加如下代码：

var interval = setInterval(function() {
    var now = new Date().getTime();
    var end_time = new Date("2022-01-01T00:00:00Z").getTime();
    var distance = end_time - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $("#countdown").html(days + "天 " + hours + "小时 "
    + minutes + "分钟 " + seconds + "秒 ");

    if (distance < 0) {
        clearInterval(interval);
        $("#countdown").html("倒计时已结束！");
    }
}, 1000);

示例2

假设需要在网站的产品详情页面上根据不同的产品显示不同的倒计时时间。可以在HTML文件中为每个产品添加一个标识ID和显示倒计时的容器，例如：

<div id="product1-countdown"></div>
<div id="product2-countdown"></div>
<div id="product3-countdown"></div>

然后在JavaScript文件中使用不同的ID和结束时间来实现不同的计时器，例如：

// 产品1倒计时
var interval1 = setInterval(function() {
    var now = new Date().getTime();
    var end_time = new Date("2022-03-01T00:00:00Z").getTime();
    var distance = end_time - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $("#product1-countdown").html(days + "天 " + hours + "小时 "
    + minutes + "分钟 " + seconds + "秒 ");

    if (distance < 0) {
        clearInterval(interval1);
        $("#product1-countdown").html("倒计时已结束！");
    }
}, 1000);

// 产品2倒计时
var interval2 = setInterval(function() {
    var now = new Date().getTime();
    var end_time = new Date("2022-04-01T00:00:00Z").getTime();
    var distance = end_time - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $("#product2-countdown").html(days + "天 " + hours + "小时 "
    + minutes + "分钟 " + seconds + "秒 ");

    if (distance < 0) {
        clearInterval(interval2);
        $("#product2-countdown").html("倒计时已结束！");
    }
}, 1000);

// 产品3倒计时
var interval3 = setInterval(function() {
    var now = new Date().getTime();
    var end_time = new Date("2022-05-01T00:00:00Z").getTime();
    var distance = end_time - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $("#product3-countdown").html(days + "天 " + hours + "小时 "
    + minutes + "分钟 " + seconds + "秒 ");

    if (distance < 0) {
        clearInterval(interval3);
        $("#product3-countdown").html("倒计时已结束！");
    }
}, 1000);

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现最简单实用的分秒倒计时 - Python技术站

jQuery实现最简单实用的分秒倒计时

准备工作

实现方法

示例说明

示例1

示例2

相关文章