10分钟，手把手教学【正确】还原京东倒计时，初学者必看，简单易懂！_贪吃?大魔王

大大的周 02-07 2408

前言

????由于今天在c站意外看到了一篇写京东倒计时的案例，觉得代码写的有问题。于是就在百度和c站搜了一下，发现基本上写的京东倒计时都是有问题的，根本没有完全还原京东的倒计时，逻辑是有问题的，感觉有点误人子弟了，这对刚入门的小白非常的不友好。于是我决定写一下这个案例，还原一下真正的京东倒计时案例。

我直接把过程给写一下，希望对初学者理解有帮助。

源码可以在末尾获取。?

作为一个前端切图仔，我先去把京东倒计时的背景图片给扒下来把。

倒计时源背景图：

然后按照京东倒计时原版布置一下css样式：

HTML:

<section> <h2>京东秒杀</h2> <div class="countdown-desc"> <span>00:00</span>点场距结束</div> <div class="hour"></div>  <span class="h_m">:</span> <div class="minute"></div>  <span class="m_s">:</span> <div class="second"></div> </div> </section>

css:

section { width: 190px; height: 260px; background: url("./images/20210523211517294.png"); overflow: hidden; position: relative; } h2 { text-align: center; color: white; margin-top: 50px; } .countdown-desc { width: 190px; height: 30px; position: absolute; top: 160px; left: 0; font-size: 14px; line-height: 30px; text-align: center; color: white; } .countdown-desc>span { font-size: 18px; margin-right: 2px; font-weight: bold; } .hour, .minute, .second { position: absolute; top: 200px; color: #fff; font-size: 20px; text-align: center; line-height: 30px; width: 30px; height: 30px; background: black; } .h_m, .m_s { font-size: 20px; font-weight: 900; position: absolute; bottom: 32px; color: white; } .hour { left: 22px; } .h_m { left: 62px; } .minute { left: 78px; } .m_s { right: 62px; } .second { left: 138px; }

运行一下，看下效果：

然后我按照步骤来写js。

1、先封装一个获取节点的函数?

function $(tag, all = false) { return all = true ? document.querySelector(tag) : document.querySelectorAll(tag); }

2、然后我们获取我们需要的节点对象?

var countdown = $('.countdown-desc span');

获取时分秒的节点

var hour = $('.hour'); var minute = $('.minute'); var second = $('.second');

3、根据京东倒计时的规律设置场数名称, 比如 8 - 10点就是8点场 10 - 12点就是10点场依次类推…?

????京东倒计时最多都都是两个小时，在网上和csdn基本上的京东倒计时都是错的，写的京东倒计时，一设置就是五六个小时还需要自己手动设定时间，连京东倒计时的规律都没弄清楚。京东的真正倒计时是自动会更新点场的，且都是两个小时的点场自动更新。

3-1 ：获取当前的时间和小时

var nowDate = new Date(); var h = nowDate.getHours();

3-2：判断小时是否是偶数

因为秒杀的场数都是偶数场，我们需要判断小时是否是偶数就可以了，是奇数的话就减 1 就是所在的点场

if(h%2){ h--; }

if 的()为1 转化为boolean的 true ； 0转为false

也可以这样写

if (h % 2 != 0) { h--; }

3-3：设置当前场数

countdown.innerHTML = h + ':00';

我们这里运行一下，看一下效果：

4、计算设置时分秒倒计时?

4-1：设置结束时间

结束的时间是当前时间的两小时后，我们就需要手动设置

小时当前时间加2 分和秒直接设置 0 就ok了

var endTime = new Date(); endTime.setHours(h + 2); endTime.setMinutes(0); endTime.setSeconds(0);

我们打印一下看下结束时间是否正确：

console.log(endTime);

4-2：计算当时间和结束时间的差值

结束的时间 - 当前的时间再转为秒

var diff = (endTime - nowDate) / 1000;

再次打印：看是否正确

console.log(diff);

4-3：计算剩余小时，分钟，秒数

var tmpH = parseInt(diff / 60 / 60); var tmpM = diff / 60 % 60; var tmpS = diff % 60;`在这里插入代码片`

未防止出错，再打印：

console.log(tmpH, tmpM, tmpS);

这里发现需要对分秒也取整：

var tmpH = parseInt(diff / 60 / 60); var tmpM = parseInt(diff / 60 % 60); var tmpS = parseInt(diff % 60);

4-4：将时分秒设置到页面中

hour.innerHTML = tmpH; minute.innerHTML = tmpM; second.innerHTML = tmpS;

看下效果：

然后我们需要让时间动起来：

5、把运行的代码放到定时器内?

把代码放入函数 time（）中

function time() {}

调用定时器：

setInterval(time, 1000);

看一下结果：好，这时已经快大功告成了。

仔细观察发现：

当刷新页面的第一时间，并不显示时间

这里只需要再定时器前先调用一次time（）就可以了 // 先调用一次 time(); setInterval(time, 1000);

另一个问题：时间小于10的时候需要调一下，再前面加 0

hour.innerHTML = tmpH < 10 ? '0' + tmpH : tmpH;

因为小时是一直小于两个小时的，可以直接写成

hour.innerHTML = '0' + tmpH; minute.innerHTML = tmpM < 10 ? '0' + tmpM : tmpM; second.innerHTML = tmpS < 10 ? '0' + tmpS : tmpS;

看下效果：

大功告成，是不是很简单？

附源码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> section { width: 190px; height: 260px; background: url("./images/20210523211517294.png"); overflow: hidden; position: relative; } h2 { text-align: center; color: white; margin-top: 50px; } .countdown-desc { width: 190px; height: 30px; position: absolute; top: 160px; left: 0; font-size: 14px; line-height: 30px; text-align: center; color: white; } .countdown-desc>span { font-size: 18px; margin-right: 2px; font-weight: bold; } .hour, .minute, .second { position: absolute; top: 200px; color: #fff; font-size: 20px; text-align: center; line-height: 30px; width: 30px; height: 30px; background: black; } .h_m, .m_s { font-size: 20px; font-weight: 900; position: absolute; bottom: 32px; color: white; } .hour { left: 22px; } .h_m { left: 62px; } .minute { left: 78px; } .m_s { right: 62px; } .second { left: 138px; } </style> </head> <body> <section> <h2>京东秒杀</h2> <div class="countdown-desc"> <span>00:00</span>点场距结束</div> <div class="hour"></div>  <span class="h_m">:</span> <div class="minute"></div>  <span class="m_s">:</span> <div class="second"></div> </div> </section> </body> <script> // 2. 获取需要的节点 var countdown = $('.countdown-desc span'); // 获取时分秒的节点 var hour = $('.hour'); var minute = $('.minute'); var second = $('.second'); function time() { // 3. 设置场数名称, 比如 8 - 10点就是8点场 10 - 12点就是10点长 // 12-14点就是12点场。京东倒计时最多都都是两个小时，在网上csdn基本上京东倒计时都是错的，写的京东倒计时，一设置就是五六个小时还需要自己手动设定时间京东的真正倒计时是自动会更新点场的，且都是两个小时的点场自动更新。都是错的。连京东倒计时的规律都没弄清楚。 // 3-1 var nowDate = new Date(); var h = nowDate.getHours(); // 3-2 判断小时是否是偶数 // if(h%2){} ()为1 转化为boolean的 true 0转为false if (h % 2 != 0) { h--; } // 3-3 设置当前场数 countdown.innerHTML = h + ':00'; // 4 计算设置时分秒倒计时 // 4-1 设置结束时间 var endTime = new Date(); endTime.setHours(h + 2); endTime.setMinutes(0); endTime.setSeconds(0); // console.log(endTime); // 4-2 计算当时间和结束时间的差值 var diff = (endTime - nowDate) / 1000; // console.log(diff); // 4-3 计算剩余小时，分钟，秒数 var tmpH = parseInt(diff / 60 / 60); var tmpM = parseInt(diff / 60 % 60); var tmpS = parseInt(diff % 60); // console.log(tmpH, tmpM, tmpS); // 4-4 将时分秒设置到页面中 hour.innerHTML = tmpH; minute.innerHTML = tmpM; second.innerHTML = tmpS; // hour.innerHTML = tmpH < 10 ? '0' + tmpH : tmpH; hour.innerHTML = '0' + tmpH; minute.innerHTML = tmpM < 10 ? '0' + tmpM : tmpM; second.innerHTML = tmpS < 10 ? '0' + tmpS : tmpS; } // 先调用一次 time(); setInterval(time, 1000); // 1. 封装一个获取节点的方法 function $(tag, all = false) { return all = true ? document.querySelector(tag) : document.querySelectorAll(tag); } </script> </html>

觉得博主写的不错的，可以收藏支持一下