JS基础-完整倒计时案例

最新推荐文章于 2022-11-29 13:33:57 发布

申申あ

最新推荐文章于 2022-11-29 13:33:57 发布

阅读量225

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43781887/article/details/124467343

版权

Javascript 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

该博客展示了如何使用JavaScript的setInterval()函数和时间戳来创建一个倒计时器，代码详细解释了如何计算剩余的小时、分钟和秒数，并在页面上实时更新显示。倒计时以2022年4月28日18:00:00为目标时间。

摘要由CSDN通过智能技术生成

需要实现的效果：

这个要利用setInterval()定时器调用获取时间的函数来实现，同时要学会使用时间戳。完整代码如下（包括布局代码）：
注释写得很详细，不明白的可以仔细看看注释哟(＾Ｕ＾)ノ~ＹＯ

<!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>倒计时案例</title>
    <!-- 样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 190px;
            height: 95px;
            background-color: #f6472d;
            margin: 300px auto;
            box-sizing: border-box;
            padding-top: 10px;
        }
        
        .box p {
            font-size: 14px;
            color: #fff;
            text-align: center;
        }
        
        .box span {
            display: block;
            float: left;
            width: 30px;
            height: 30px;
            background-color: #2e322c;
            margin: 10px 5px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-weight: 700;
        }
        
        .box span:nth-of-type(1) {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <script>
        window.onload = function() {
            // 获取元素
            var hours = document.querySelector('.hours');
            var minutes = document.querySelector('.minutes');
            var seconds = document.querySelector('.seconds');
            // 先调用一次这样刚刷新页面的时候就不会显示初始的11 12 13了
            var result = getTime('2022-4-28 18:00:00');
            hours.innerHTML = result[0];
            minutes.innerHTML = result[1];
            seconds.innerHTML = result[2];
            // 调用获取时间的函数
            window.setInterval(function() {
                var result = getTime('2022-4-28 18:00:00');
                hours.innerHTML = result[0];
                minutes.innerHTML = result[1];
                seconds.innerHTML = result[2];
            }, 1000)

            // 封装一个获取时间的函数
            function getTime(timer) {
                var arr = [];
                // 获取现在的毫秒数
                var nowTime = +new Date();
                // 获取指定时间的时间戳
                var afterTime = +new Date(timer);
                // 相减得到相差的毫秒数
                var times = (afterTime - nowTime) / 1000;
                // 计算时间
                // 小时
                var hour = parseInt(times / 60 / 60 % 24);
                hour = hour < 10 ? '0' + hour : hour;
                hour = String(hour)
                arr.push(hour);

                // 分钟
                var minute = parseInt(times / 60 % 60);
                minute = minute < 10 ? '0' + minute : minute;
                minute = String(minute)
                arr.push(minute);

                // 秒数
                var second = parseInt(times % 60);
                second = second < 10 ? '0' + second : second;
                second = String(second)
                arr.push(second);
                // 返回时间数组
                return arr;
            }


        }
    </script>
    <div class="box">
        <p>本场距离结束还剩</p>
        <!-- 下面的时间模块 -->
        <span class="hours">11</span>
        <span class="minutes">12</span>
        <span class="seconds">13</span>
    </div>

</body>

</html>