10分钟，手把手教学正确还原京东倒计时，初学者必看，简单易懂！
Posted 贪吃ღ大魔王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10分钟，手把手教学正确还原京东倒计时，初学者必看，简单易懂！相关的知识，希望对你有一定的参考价值。
前言
由于今天在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>
觉得博主写的不错的，可以收藏支持一下
以上是关于10分钟，手把手教学正确还原京东倒计时，初学者必看，简单易懂！的主要内容，如果未能解决你的问题，请参考以下文章