JS实现动态倒计时

HTML部分：

        首先给一个div快，然后在div快中写三个span标签用来盛装时分秒，并且给时分秒的标签分别给ID值，后续js部分用；然后在小时与分钟之分别给div快放冒号

 <div class="all">
        <span id="h"></span>
        <div id="one">:</div>
        <span id="m"></span>
        <div id="two">:</div>
        <span id="s"></span>
 </div>

CSS部分：

        设置相关的样式

<style>
        /* 大盒子设置宽高 清除浮动 子绝父相 设置居中  */
        .all {
            width: 150px;
            height: 45px;
            background-color: red;
            overflow: hidden;
            margin: auto;
            position: relative;
        }
        /* 三个span标签进行转换为行内快元素设置宽高等样式 并且浮动*/
        span {
            display: block;
            width: 30px;
            height: 30px;
            background-color: black;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 15px;
            float: left;
            margin-top: 7px;
        }
        /* 给第一个冒号的盒子进行浮动 然后通过子绝父相定位置 */
        #one{
            float: left;
            color: white;
            position: absolute;
            left: 50px;
            top: 9px;
        }
        /* 给第二个冒号的盒子进行浮动 然后通过子绝父相定位置 */
        #two {
            float: left;
            color: white;
            position: absolute;
            left: 94px;
            top: 9px;
        }
 </style>

JS部分：

        （1）要想让js代码放在html元素之前，就要在script中设置窗口加载事件

                  1.window.οnlοad=function（）{js代码；}

                  2.window.addEventListener('load',function(){js代码；})

        （2）获取到span标签内的时分秒的标签。

        （3）获取当前时间的时间戳，获取未来时间的时间戳，然后做差值，得到时间戳的差总秒数

        （4）然后分别转换成时分秒；分别判断当小于10的时候，给对应的数字进行拼接0；

        （5）将转换的时分秒的时间分别给到各自的span标签的内容中

        （6）设置循环的倒计时setInterval(函数,毫秒数之后运行)

        注意：因为此代码运行是刷新过程中会有1s中的间隔时间，所以在调用倒计时之前，需要提前调用一次封装的倒计时的函数，避免间隔时间的空缺。

<script>
        window.addEventListener('load', function () {
            var h1 = document.getElementById('h');
            var m1 = document.getElementById('m');
            var s1 = document.getElementById('s');
            fut();
            function fut() {
                var date = +new Date();
                var date1 = +new Date('2023-8-28 19:00:00');
                var reduce = date1 - date;
                //得到当前的时间戳的差总秒数
                var seconds = reduce / 1000;
                //转换成小时数
                var h = parseInt(seconds / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                //转换成分钟数
                var m = parseInt(seconds / 60 % 60);
                m = m < 10 ? '0' + m : m;
                //转换成秒数
                var s = parseInt(seconds % 60);
                s = s < 10 ? '0' + s : s;
                h1.innerHTML = h;
                m1.innerHTML = m;
                s1.innerHTML = s;
            }
            //循环的倒计时
            window.setInterval(fut, 1000);

        })
</script>

运行效果展示：