js倒计时

Posted 2020-12-17 还只是一只菜鸟

计算当前时间

var nowTime = new Date();

设置 结束时间

var endTime = new Date("2020/07/28,17:57:00");

计算剩余的全部 毫秒数

 var leftTime = parseInt(
          (endTime.getTime() - nowTime.getTime()) / 1000
        );

计算天、时、分、秒

 var d = parseInt(leftTime / (24 * 60 * 60));
        var h = parseInt((leftTime / (60 * 60)) % 24);
        var m = parseInt((leftTime / 60) % 60);
        var s = parseInt(leftTime % 60);

渲染

1 document.querySelector(
2 ".count"
3 ).innerhtml = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
4 // 如果 全部毫秒数 小于等于0 提示活动结束
5 if (leftTime <= 0) {
6 document.querySelector(".count").innerHTML = "活动已结束";
7 return;
8 }

注意 当倒数的数到10一下的时候，要进行补零处理

1 function addZero(i) {
2         return i < 10 ? "0" + i : i + "";
3       }
4 
5 // 不足两位进行补零
6         d = addZero(d);
7         h = addZero(h);
8         m = addZero(m);
9         s = addZero(s);

进行封装放在定时器里执行（或者计时器中）

setTimeout(countDown, 1000);

完整代码

 1 html：
 2 <div class="count"></div>
 3 
 4 js  
 5 window.onload = function () {
 6       countDown();
 7       // 十以下的数进行补0
 8       function addZero(i) {
 9         return i < 10 ? "0" + i : i + "";
10       }
11 
12       function countDown() {
13         // 计算当前时间
14         var nowTime = new Date();
15         //  计算 结束时间
16         var endTime = new Date("2020/07/28,17:57:00");
17         // 剩余的全部 毫秒数
18         var leftTime = parseInt(
19           (endTime.getTime() - nowTime.getTime()) / 1000
20         );
21         // 计算 天、时、分、秒
22         var d = parseInt(leftTime / (24 * 60 * 60));
23         var h = parseInt((leftTime / (60 * 60)) % 24);
24         var m = parseInt((leftTime / 60) % 60);
25         var s = parseInt(leftTime % 60);
26         // 不足两位进行补零
27         d = addZero(d);
28         h = addZero(h);
29         m = addZero(m);
30         s = addZero(s);
31 
32         document.querySelector(
33           ".count"
34         ).innerHTML = `活动倒计时  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
35         // 如果 全部毫秒数 小于等于0 提示活动结束
36         if (leftTime <= 0) {
37           document.querySelector(".count").innerHTML = "活动已结束";
38           return;
39         }
40         setTimeout(countDown, 1000);
41       }
42     };

View Code