页面显示多个倒计时简单案例_倒计时多开-优快云博客

本文链接：https://blog.youkuaiyun.com/wangcuiling_123/article/details/87728003

本文介绍了一种在网页上实现多个倒计时的方法，通过构造函数实例化，适用于购物商城等场景，展示了完整的HTML、CSS和JavaScript代码，以及如何读取元素属性设置不同的倒计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到一篇关于页面显示多个倒计时的，发现代码存在一些错误，而且是采用了对象的方式，无法实现多个倒计时，一般这种是使用在购物商城多个商品倒计时，便自己写了以下这个简单的案例，采用构造函数，可实例化多个（已测试）：

效果图：

在这里插入图片描述

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个倒计时</title>
</head>
<body>
<div class="time countdown_1" data-time="1552583513">   <!-- data-time 为结束时间戳 单位到秒 -->
    <span class="t_d_1">00</span>
    <i class="lay_line">天</i>
    <span class="t_h_1">00</span>
    <i class="lay_line">:</i>
    <span class="t_m_1">00</span>
    <i class="lay_line">:</i>
    <span class="t_s_1">00</span>
</div>
<div class="time countdown_2" data-time="1553665521">   <!-- data-time 为结束时间戳 单位到秒 -->
    <span class="t_d_2">00</span>
    <i class="lay_line">天</i>
    <span class="t_h_2">00</span>
    <i class="lay_line">:</i>
    <span class="t_m_2">00</span>
    <i class="lay_line">:</i>
    <span class="t_s_2">00</span>
</div>
</body>
<script src="js/jquery-1.9.1.js"></script>
<script>
    function PlugJs(stampend,tid) {
        this.tid = tid || 1;
        this.stampnow = Date.parse(new Date())/1000;  //统一开始时间戳 单位到秒
        this.stampend = stampend || 0;
        this.stamp = parseInt(this.stampend)-parseInt(this.stampnow);//剩余时间戳
        this.intervalTime = function() {
            if(this.stamp > 0) {
                var day = Math.floor(this.stamp / (60 * 60 * 24));
                var hour = Math.floor(this.stamp / (60 * 60)) - (day * 24);
                var minute = Math.floor(this.stamp / 60) - (day * 24 * 60) - (hour * 60);
                var second = Math.floor(this.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

                if (day <= 9) day = '0' + day;
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                jQuery('.t_d_'+this.tid).html(day);
                jQuery('.t_h_'+this.tid).html(hour);
                jQuery('.t_m_'+this.tid).html(minute);
                jQuery('.t_s_'+this.tid).html(second);
                this.stamp--;
                var that = this;
                setTimeout(function(){
                    if(typeof(that.intervalTime) == "function"){
                        that.intervalTime();
                    }
                },1000);
            }
        };
        this.timer = function() {
            var that = this;
            setTimeout(function(){
                if(typeof(that.intervalTime) == "function"){
                    that.intervalTime();
                }
            },1000);
        };
    }
    jQuery(document).ready(function(){
        var stampend = parseInt(jQuery('.countdown_1').attr('data-time'));//灵活读取表里的结束时间戳
        var timer1 = new PlugJs(stampend,'1');
        timer1.timer();
        var stampend2 = parseInt(jQuery('.countdown_2').attr('data-time'));//灵活读取表里的结束时间戳
        var timer2 = new PlugJs(stampend2, '2');
        timer2.timer();
    });
</script>
</html>