前端-js网页特效（一）倒计时效果及原理

目录

一、原理

二、代码解析（内有注释）

css部分

HTML部分：

script部分：

三、实际效果图

 四、结束语

---

一、原理

说到倒计时效果，基本面实现的话离不开 setInterval()这个方法，通过setInterval这个方法每隔一秒重新求当前时间减去目标时间所得到的时间长度，依照不同计时单位分别求值。

细节部分注意：当时间位数为个位数，要添加判断条件，额外添加一个“0”以补全位数，

强迫症dddd，话不多说附上代码吧

二、代码解析（内有注释）

css部分

 .box {
            display: flex;
            justify-content: space-evenly;
            width: 150px;
            height: 40px;
            margin: 100px auto;
        }
        
        .hour, .minute, .second {
            background-color: #000;
            display: block;
            width: 40px;
            height: 40px;
            color: white;
            line-height: 40px;
            text-align: center;
            
           
        }

HTML部分：

<div class="box">
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>

script部分：

 var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-10-29 22:00:00');
        //开启计时器
        setInterval(getTime, 1000);
        function getTime ()
        {
            var time = +new Date ();
            var times = (inputTime - time) / 1000;
            var t = parseInt(times / 60 / 60 % 24);   //小时数
            t = t < 10 ? '0'+t:t;
            hour.innerHTML = t;
            var m = parseInt(times / 60 % 60);        //分钟
            m = m < 10 ? '0'+m:m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);             //秒
            s = s < 10 ? '0'+s:s;
            second.innerHTML = s;
        }

三、实际效果图

（哪位大佬可以指点指点 不知道怎么录视频啊啊啊啊啊啊 ）

 四、结束语

希望本篇文章可以帮到求知若渴的众多同学
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 谢谢各位~