js:运用JavaScript写一个倒计时模版

首先，让我们来分析一下如何来写一个倒计时；

目录

第一步：获取当前时间和获取截止时间；

第二步：得出时间差值，计算天、时、分、秒；

第三步：拼接字符串，将结果输出到对应的标签中；

第四部：封装函数，调用函数以及运用定时器调用函数

---

第一步：获取当前时间和获取截止时间；

获取当前时间

var nowtime = new Date().getTime();

因为为了后续的方便计算，我们获取当前时间的总毫秒数，

getTime（）获取1970年1月1日距当前时间的毫秒数。

获取截止时间（里面时间可以根据实际情况修改，这里只做举例）

var deadline = new Date("2022/8/28 00:00:00").getTime();

---

第二步：得出时间差值，计算天、时、分、秒；

计算时间差值

 var differtime = deadline - nowtime;

根据差值计算天、时、分、秒

 var day = Math.floor(differtime / 1000 / 60 / 60 / 24);
            var hours = Math.floor(differtime / 1000 / 60 / 60 % 24);
            var minute = Math.floor(differtime / 1000 / 60 % 60);
            var second = Math.floor(differtime / 1000 % 60);

为了时间观看美观，我们还可以在数字小于10时，添加一个0；

if (hours < 10) {
                hours = "0" + hours;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (second < 10) {
                second = "0" + second;
            }

---

第三步：拼接字符串，将结果输出到对应的标签中；

这时候js部分已经基本差不多快结束了，就差最后的输出和定时器部分了；

现在开始对页面进行制作

创建一个html部分（为了实现一个函数的多次使用这里我们创建三个倒计时）

<p>活动截止时间:2022/8/28 00:00:00</p>
    <p>活动倒计时:<span class="time"></span></p>
    <p>活动倒计时:<span class="time"></span></p>
    <p>活动倒计时:<span class="time"></span></p>

获取html元素（注意因为有多个time类名，所以这里我们使用querySelectorAll进行选择）

var timer = document.querySelectorAll('.time');

将输出结果拼接成一个字符串，方便后面调用

 var remaining = day + '天' + hours + '时' + minute + '分' + second + '秒';

遍历数组，使js可多次运用

for (let i = 0; i < timer.length; i++) {
                timer[i].innerHTML = remaining;
            }

---

第四部：封装函数，调用函数以及运用定时器调用函数

js部分如下：

<script>
        var timer = document.querySelectorAll('.time');
        var deadline = new Date("2022/8/28 00:00:00").getTime();
        function set() {
            var nowtime = new Date().getTime();
            var differtime = deadline - nowtime;
            // 获取 天 时 分 秒
            var day = Math.floor(differtime / 1000 / 60 / 60 / 24);
            var hours = Math.floor(differtime / 1000 / 60 / 60 % 24);
            var minute = Math.floor(differtime / 1000 / 60 % 60);
            var second = Math.floor(differtime / 1000 % 60);
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (second < 10) {
                second = "0" + second;
            }
            var remaining = day + '天' + hours + '时' + minute + '分' + second + '秒';
            for (let i = 0; i < timer.length; i++) {
                timer[i].innerHTML = remaining;
            }
        }
        set();
        setInterval(set, 1000); 

    </script>

---

最后，效果展示

 总体应该没有太多问题，但由于本人毕竟资历尚浅，若有考虑不周之处，还劳烦各位在评论区。为我指点一二。同时也可以希望这篇文章能帮助到需要帮助的人。