原生js编写一个距离目标时间的倒计时_距离目标时间还有多少小时-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64337756/article/details/122245849

本文介绍了如何使用原生JavaScript编写一个计算并显示距离2022年2月1日目标时间的倒计时代码，涵盖了时间处理和更新显示的核心逻辑。

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

这里是距离2022.2.1的目标时间倒计时

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: block;
            height: 50px;
            line-height: 50px;
            width: 500px;
            margin: 100px auto;
            border-radius: 5px ;
            text-align: center;
            background-color: pink;
            color: #000;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <span>距离目标时间:xx天xx时xx分xx秒</span>
    <script>
        // 获取元素
        var span = document.getElementsByTagName("span")[0];
        // var span = document.getElementsByTagName("span");
        // 页面初始化
        downCont();

        // 设置定时器
        setInterval(downCont, 1000);

        // 倒计时
        function downCont() {
            // 当前本地时间
            var curDate = new Date();
            // 目标时间
            var tarDate = new Date("2022/2/1 00:00:00");

            // 获取当前事件的时间戳
            var curDateMillSeconds = curDate.getTime();
            var tarDateMillSeconds = tarDate.getTime();

            // 秒差
            var diffSeconds = parseInt((tarDateMillSeconds - curDateMillSeconds) / 1000);

            // 将秒差转为 天  时  分  秒
            var day = parseInt(diffSeconds / 86400); // diffSeconds / 60 / 60 /24

            // 秒差一部分已经转为天  要除去天占的秒数
            var hour = parseInt(diffSeconds % 86400 / 3600);

            // 分 除去小时部分
            var minutes = parseInt(diffSeconds % 3600 / 60);

            // 秒 
            var seconds = diffSeconds % 60;

            // 赋值操作
            span.innerHTML = "距离目标时间:" + zero(day) + "天" + zero(hour) + "时" + zero(minutes) + "分" + zero(seconds) + "秒";
        }

        // 补零操作
        function zero(val) {
            return val < 10 ? "0" + val : val;
        }
    </script>
</body>

</html>