js倒计时（时间对象）

最新推荐文章于 2024-09-11 15:33:18 发布

歪大梨

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量104

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126860283

版权

HTML CSS JavaScript 倒计时双十一

关键词由CSDN通过智能技术生成

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            float: left;
            margin-right: 20px;
            height: 100px;
            line-height: 100px;
            font-size: 30px;
            font-weight: 800;
            text-align: center;
            border-radius: 10px;
        }

        p:nth-child(1) {
            width: 400px;
            background-color: pink;
        }

        p:nth-child(2) {
            width: 400px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <p>
        当前距离双十一还有：
    </p>
    <p>
    </p>
    <script>
        //倒计时
        var ps = document.getElementsByTagName("p");
        var target = new Date("2022/11/11 0:0:0");
        //思路

        function countDown () {
            //1.创建当前时间 和 目标时间的 时间对象
            var current = new Date();
            //2.计算当前时间 到 目标时间的时间差
            //我们可以直接使用两个时间对象相减 即可得到时间差（单位为ms）
            var cha = target - current;
            console.log(cha);
            //处理时间差 将单位设置为s
            cha = Math.round(cha / 1000);
            //3.将时间差 格式化为 日时分秒的形式
            var d = parseInt(cha / 24 / 3600);
            var h = parseInt(cha % (24 * 3600) / 3600);
            var m = parseInt(cha % 3600 / 60);
            var s = cha % 60;
            ps[1].innerText = d + "天" + h + "小时" + m + "分钟" + s + "秒"
        }
        countDown()

        setInterval(countDown, 1000)
    </script>
</body>

</html>

效果如下