使用jquery实现倒计时，正计时，且支持页面上多个时间分别倒计时与正计时

虾米玩意

已于 2023-11-30 09:39:13 修改

阅读量385

点赞数 5

分类专栏： HTML 文章标签： jquery 前端 javascript

于 2023-11-29 15:57:06 首次发布

本文链接：https://blog.csdn.net/qq_35150992/article/details/134690759

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

该功能一共有三个核心技术点

（1）减时间

（2）增时间

（3）减时间到0之后，开始增时间

（4）页面上多个时间，该增加的增加，该减少的减少

小声嘀咕：好像说了跟没说一样。。。

正片

成果

不想看长篇大论的可以直接拿走代码运行

<html>

<body>
    <p>
        <font color=red>已超时：<span class='add_day'>1</span>天<span class='add_hour'>2</span>时<span class='add_minute'>8</span>分<span class="add_second">30</span>秒</font>
    </p>

    <p>
        <font color=red>已超时：<span class='add_day'>5</span>天<span class='add_hour'>23</span>时<span class='add_minute'>59</span>分<span class="add_second">55</span>秒</font>
    </p>

    <p>
        <font color=red>已超时：<span class='add_day'>0</span>天<span class='add_hour'>1</span>时<span class='add_minute'>0</span>分<span class="add_second">45</span>秒</font>
    </p>

    <p>
        <span class='sub_text'>剩余时间：<span class='sub_day'>0</span>天<span class='sub_hour'>1</span>时<span class='sub_minute'>1</span>分<span class="sub_second">20</span>秒</span>
    </p>

    <p>
        <span class='sub_text'>剩余时间：<span class='sub_day'>1</span>天<span class='sub_hour'>0</span>时<span class='sub_minute'>30</span>分<span class="sub_second">45</span>秒</span>
    </p>

    <p>
        <span class='sub_text'>剩余时间：<span class='sub_day'>5</span>天<span class='sub_hour'>2</span>时<span class='sub_minute'>0</span>分<span class="sub_second">3</span>秒</span>
    </p>
</body>

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
    integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script> -->

<script type="text/javascript">

    // 在一分钟后，为超时时间加上一分钟
    function add_time() {
        // 获取所有的超时时分秒类
        var all_second = $('.add_second')
        var all_minute = $('.add_minute')
        var all_hour = $('.add_hour')
        var all_day = $('.add_day')

        var second = []
        var minute = []
        var hour = []
        var day = []

        // 依次获取超时时间的时分秒
        for (var i = all_minute.length - 1; i >= 0; i--) {
            second[i] = parseInt(all_second[i].innerText)
            minute[i] = parseInt(all_minute[i].innerText)
            hour[i] = parseInt(all_hour[i].innerText)
            day[i] = parseInt(all_day[i].innerText)
        }
        // 依次处理时分秒
        for (var i = minute.length - 1; i >= 0; i--) {
            if (second[i] < 59) {
                all_second[i].innerText = second[i] + 1;
            } else {
                all_second[i].innerText = 0;
                if (minute[i] < 59) {
                    all_minute[i].innerText = minute[i] + 1;
                } else {
                    all_minute[i].innerText = 0;
                    if (hour[i] < 23) {
                        all_hour[i].innerText = hour[i] + 1;
                    } else {
                        all_hour[i].innerText = 0;
                        all_day[i].innerText = day[i] + 1;
                    }
                }
            }
        }
        setTimeout(function () {
            // 在延迟后执行的代码
            add_time();

        }, 1000);
    }

    // 在1分钟后，为剩余时间减去一分钟
    function sub_time() {
        // 获取所有的剩余时分秒类
        var all_second = $('.sub_second')
        var all_minute = $('.sub_minute')
        var all_hour = $('.sub_hour')
        var all_day = $('.sub_day')
        var all_text = $('.sub_text')

        var second = []
        var minute = []
        var hour = []
        var day = []
        // 依次获取剩余时间的时分秒
        for (var i = all_minute.length - 1; i >= 0; i--) {
            second[i] = parseInt(all_second[i].innerText)
            minute[i] = parseInt(all_minute[i].innerText)
            hour[i] = parseInt(all_hour[i].innerText)
            day[i] = parseInt(all_day[i].innerText)
        }

        // 依次处理时分秒
        for (var i = minute.length - 1; i >= 0; i--) {
            if (second[i] <= 0) {
                all_second[i].innerText = 59;
                if (minute[i] <= 0) {
                    all_minute[i].innerText = 59;
                    if (hour[i] <= 0) {
                        all_hour[i].innerText = 23;
                        if (day[i] <= 0) {
                            all_text[i].innerHTML = '<font color="red">已超时：<span class="add_day">0</span>天<span class="add_hour">0</span>时<span class="add_minute">0</span>分<span class="add_second">0</span>秒</font>'
                        } else {
                            all_day[i].innerText = day[i] - 1;
                        }
                    } else {
                        all_hour[i].innerText = hour[i] - 1;
                    }
                } else {
                    all_minute[i].innerText = minute[i] - 1;
                }
            } else {
                all_second[i].innerText = second[i] - 1;
            }
        }

        setTimeout(function () {
            // 在延迟后执行的代码
            sub_time();

        }, 1000);
    }

    $(function () {
        setTimeout(function () {
            // 在延迟后执行的代码
            add_time();
            sub_time();

        }, 1000);


    });


</script>

</html>

增时间

先来说增时间吧

先看js代码，这是增时间的核心代码

if(second[i]<59){
    all_second[i].innerText = second[i]+1;
}else{
    all_second[i].innerText = 0;
    if(minute[i]<59){
        all_minute[i].innerText = minute[i]+1;
    }else{
        all_minute[i].innerText = 0;
        if(hour[i]<23){
            all_hour[i].innerText = hour[i] + 1;
        }else{
            all_hour[i].innerText = 0;
            all_day[i].innerText = day[i] + 1;
        }
    }
}

增时间比较简单，主要思想就是，先判断最小单位，小于59的话，无脑增加，如果大于等于59的话，赋值0之后给上一位加1，上一位加的时候也要判断是否满足进1条件，满足的话，依次处理

减时间

减时间稍微复杂一点点，但是和增时间也比较类似

先看代码

if (second[i] <= 0) {
    all_second[i].innerText = 59;
    if (minute[i] <= 0) {
        all_minute[i].innerText = 59;
        if (hour[i] <= 0) {
            all_hour[i].innerText = 23;
            if (day[i] <= 0) {
                all_text[i].innerHTML = '<font color="red">已超时：<span class="add_day">0</span>天<span class="add_hour">0</span>时<span class="add_minute">0</span>分<span class="add_second">0</span>秒</font>'
            } else {
                all_day[i].innerText = day[i] - 1;
            }
        } else {
            all_hour[i].innerText = hour[i] - 1;
        }
    } else {
        all_minute[i].innerText = minute[i] - 1;
    }
} else {
    all_second[i].innerText = second[i] - 1;
}

减时间的时候，也是从最小单位秒开始减，判断秒是不是小于等于0，如果大于0的话，无脑减1，小于等于0的话，下一次应该要赋值给秒59的值了，但是也应该判断前一位是否满足小于等于0，若满足，依次处理

减到0之后，开始增时间

和增时间不同的是，如果所有位都减到了0，则应该开始从0计数，开始增加时间，所以当所有位都减到0时，直接给那个p标签中更换html文本

多个时间的处理

经查找资料，可以对同一类的多个标签进行依次处理

// 获取所有的剩余时分秒类
var all_second = $('.sub_second')
var all_minute = $('.sub_minute')
var all_hour = $('.sub_hour')
var all_day = $('.sub_day')
var all_text = $('.sub_text')

var second = []
var minute = []
var hour = []
var day = []
// 依次获取剩余时间的时分秒
for (var i = all_minute.length - 1; i >= 0; i--) {
    second[i] = parseInt(all_second[i].innerText)
    minute[i] = parseInt(all_minute[i].innerText)
    hour[i] = parseInt(all_hour[i].innerText)
    day[i] = parseInt(all_day[i].innerText)
}
for (var i = minute.length - 1; i >= 0; i--) {
    // 循环处理
}

首先通过“$('.sub_second')”的方式获取class，然后整理出各class的时分秒信息，方便后面foreach处理，获取完之后，丢foreach里，该增增，该减减

结尾

本文没有增加上年，如果需要的话，可以举一反三，如果想去掉秒的话，也希望大家可以举一反三

虾米玩意

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用jquery实现倒计时，正计时，且支持页面上多个时间分别倒计时与正计时

该功能一共有三个核心技术点（1）减时间（2）增时间（3）减时间到0之后，开始增时间（4）页面上多个时间，该增加的增加，该减少的减少小声嘀咕：好像说了跟没说一样。。。正片成果不想看长篇大论的可以直接拿走代码运行增时间先来说增时间吧先看js代码，这是增时间的核心代码增时间比较简单，主要思想就是，先判断最小单位，小于59的话，无脑增加，如果大于等于59的话，赋值0之后给上一位加1，上一位加的时候也要判断是否满足进1条件，满足的话，依次处理。
复制链接

扫一扫

专栏目录