JS实战（京东秒杀）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>js京东秒杀</title>
  6 
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         .box {
 14              190px;
 15             height: 270px;
 16             text-align: center;
 17             margin: 100px auto;
 18             background: #dd0000;
 19             color: white;
 20             padding-top: 40px;
 21             box-sizing: border-box;
 22         }
 23 
 24         .box > h3 {
 25             font-size: 26px;
 26         }
 27 
 28         .box > p:nth-of-type(1) {
 29             margin-top: 5px;
 30             color: rgba(255, 255, 255, 0.5);
 31         }
 32 
 33         .box > i {
 34             display: inline-block;
 35             margin-top: 5px;
 36             margin-bottom: 5px;
 37             font-size: 40px;
 38         }
 39 
 40         .box > .time {
 41             margin-top: 10px;
 42             display: flex;
 43             justify-content: center;
 44         }
 45 
 46         .time > div {
 47              40px;
 48             height: 40px;
 49             line-height: 40px;
 50             text-align: center;
 51             font-weight: bold;
 52             background: #333;
 53             position: relative;
 54         }
 55 
 56         .time > .minute {
 57             margin: 0 10px;
 58         }
 59 
 60         .time > div::before {
 61             content: "";
 62             display: block;
 63              100%;
 64             height: 2px;
 65             background: #d00;
 66             position: absolute;
 67             left: 0;
 68             top: 50%;
 69             transform: translateY(-50%);
 70         }
 71     </style>
 72     <link rel="stylesheet" href="fonts/iconfont.css">
 73 </head>
 74 <body>
 75 <div class="box">
 76     <h3>京东秒杀</h3>
 77     <p>FLASH DEALS</p>
 78     <i class="iconfont icon-lightningbshandian"></i>
 79     <p>本场距离结束还剩</p>
 80     <div class="time">
 81         <div class="hour"></div>
 82         <div class="minute"></div>
 83         <div class="second"></div>
 84     </div>
 85 </div>
 86 <script>
 87     //1.获取到需要操作的元素
 88     let oHour = document.querySelector(".hour");
 89     let oMinute = document.querySelector(".minute");
 90     let oSecond = document.querySelector(".second");
 91 
 92     //2.获取时间的差值
 93     let remDate = new Date("2020-3-14 22:00:00");
 94     setTime(remDate);//设置初始化时间
 95     //4.利用定时器实现倒计时
 96     setInterval(function () {
 97         setTime(remDate);
 98     }, 1000);
 99 
100     /**
101      * 3.将差值设置给元素
102      */
103     function setTime(remDate) {
104         let obj = getDifferTime(remDate);
105         oHour.innerText = obj.hour;
106         oMinute.innerText = obj.minute;
107         oSecond.innerText = obj.second;
108     }
109 
110 
111     /**
112      * 获得时间差值
113      * @param remDate 未来的时间
114      * @param curDate 当前的时间
115      * @returns {{hour: any | number, day: any | number, minute: any | number, second: any | number}}
116      */
117     function getDifferTime(remDate, curDate = new Date()) {
118         // 1.得到两个时间之间的差值(毫秒)
119         let differTime = remDate - curDate;
120         // 2.得到两个时间之间的差值(秒)
121         let differSecond = differTime / 1000;
122         // 3.利用相差的总秒数 / 每一天的秒数 = 相差的天数
123         let day = Math.floor(differSecond / (60 * 60 * 24));
124         day = day >= 10 ? day : "0" + day;
125         // 4.利用相差的总秒数 / 小时 % 24;
126         let hour = Math.floor(differSecond / (60 * 60) % 24);
127         hour = hour >= 10 ? hour : "0" + hour;
128         // 5.利用相差的总秒数 / 分钟 % 60;
129         let minute = Math.floor(differSecond / 60 % 60);
130         minute = minute >= 10 ? minute : "0" + minute;
131         // 6.利用相差的总秒数 % 秒数
132         let second = Math.floor(differSecond % 60);
133         second = second >= 10 ? second : "0" + second;
134         return {
135             day: day,
136             hour: hour,
137             minute: minute,
138             second: second,
139         }
140     }
141 </script>
142 </body>
143 </html>