倒计时封装

最新推荐文章于 2025-09-06 10:31:16 发布

原创最新推荐文章于 2025-09-06 10:31:16 发布 · 250 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

案例专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在HTML中封装一个倒计时组件，详细阐述了实现倒计时的逻辑和步骤，包括设置时间间隔、更新DOM元素以及处理时间格式等关键点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>js时分秒毫秒倒计时</title>
</head>

<body>
    <div class="active_time" id="active_time">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
    <script src="./local/js/jquery.js"></script>
    <script>
        //js部分
        function countTime(value) {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();

            //设置截止时间
            //在pc端浏览器可以这样写
            var endDate = new Date("2020-09-08 00:00:00");
            //移动端必须这样写，因为ios不支持日期中间是-链接，会报错
            //var endDate = new Date("2019/7/22 00:00:00");
            var end = endDate.getTime();
            //时间差
            var differTime = end - now;
            //定义变量,h,m,s保存倒计时的时间
            
            var h=$('#h').html();
            var m=$('#m').html();
            var s=$('#s').html();
            if (differTime >= 0) {
                h = Math.floor(differTime / 1000 / 60 / 60);
                m = Math.floor(differTime / 1000 / 60 % 60);
                s = Math.floor(differTime / 1000 % 60);
                h = h < 10 ? ("0" + h) : h;
                m = m < 10 ? ("0" + m) : m;
                s = s < 10 ? ("0" + s) : s;
                var timeDom =`倒计时:<span>${h}</span>:<span>${m}</span>:<span>${s}</span>`
                $("#active_time").html(timeDom);
                //递归调用函数所以是延时器不是定时器
                setTimeout(function () {
                    countTime(value)
                }, 1000);
            } else {
                var timeDom = "00小时 00分 00秒";
                $("#active_time").text(timeDom);
            }
        }
        countTime()
    </script>
</body>

</html>