一、产品需求
下图是京东首页的京东秒杀倒计时
我们将模仿京东倒计时做一个下班倒计时效果（如下图）
二、代码素材
我先把缺失JS部分的代码放在这里，感兴趣的小伙伴可以先自己试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是xxxx年x月xx日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="scond">20</span>
</p>
<p class="tips">18:30:00下课</p>
</div>
<script>
</script>
</body>
</html>三、算法思路
1、获取当日日期并渲染至倒计时顶部
2、获取当日下班时间的时间戳
3、封装函数：获取剩余时间
3.1. 获取当前时间的时间戳
3.2. 两时间戳相减得到剩余时间
3.3. 将时间转化成时分秒
3.4. 将时间渲染到页面中，小于10的数字前需要补0
4、先调用一次获取剩余时间的函数，因为间歇函数一秒之后才会启用
5、利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是xxxx年x月xx日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">xx</span>
<i>:</i>
<span id="minutes">xx</span>
<i>:</i>
<span id="second">xx</span>
</p>
<p class="tips">18:30:00下课</p>
</div>
<script>
//获取当日日期并渲染至倒计时顶部
const date = new Date()
const next = document.querySelector('.next')
next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
//获取当日下班时间的时间戳
const afterWork = +new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 18:30:00`)
//封装函数：获取剩余时间
function getCountTime() {
//获取当前时间的时间戳
const now = +new Date()
//两时间戳相减得到剩余时间
const remain = (afterWork - now) / 1000
//将时间转化成时分秒
const s = parseInt(remain % 60)
const m = parseInt(remain / 60 % 60)
const h = parseInt(remain / 60 / 60 % 24)
//将时间渲染到页面中，记得小于10的数字前需要补0
const hour = document.querySelector('#hour')
const minutes = document.querySelector('#minutes')
const second = document.querySelector('#second')
hour.innerHTML = h >= 10 ? h : '0' + h
minutes.innerHTML = m >= 10 ? m : '0' + m
second.innerHTML = s >= 10 ? s : '0' + s
}
//先调用一次，因为间歇函数一秒之后才会启用
getCountTime()
//利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒
let timer = setInterval(() => {
getCountTime()
}, 1000)
</script>
</body>
</html>
