js-倒计时是比较常用的一个js小功能，有的时候，公司需要进行活动倒计时的时候，会需要在页面显示出来。有的时候是需要1个，有的时候可能需要多个。如果单独写一个比较简单，多个的时候，可能会重新很多代码，因此，通过对js代码的封装为函数，每一个页面需要的地方调用这个函数就会简单方便多了。
预览效果
22.jpg
主要思路：使用setInterval()函数
setInterval(function(){},time)
HTML部分
<div class="box">
<div class="box_item">
<div class="box_itemt box_itemx">建军节：</div>
<div class="jjj_d box_itemx box_itemy">00天</div>：
<div class="jjj_h box_itemx box_itemy">00时</div>：
<div class="jjj_m box_itemx box_itemy">00分</div>：
<div class="jjj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">中元节：</div>
<div class="zqj_d box_itemx box_itemy">00天</div>：
<div class="zqj_h box_itemx box_itemy">00时</div>：
<div class="zqj_m box_itemx box_itemy">00分</div>：
<div class="zqj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">教师节：</div>
<div class="jsj_d box_itemx box_itemy">00天</div>：
<div class="jsj_h box_itemx box_itemy">00时</div>：
<div class="jsj_m box_itemx box_itemy">00分</div>：
<div class="jsj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">国庆节：</div>
<div class="gqj_d box_itemx box_itemy">00天</div>：
<div class="gqj_h box_itemx box_itemy">00时</div>：
<div class="gqj_m box_itemx box_itemy">00分</div>：
<div class="gqj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">重阳节：</div>
<div class="cyj_d box_itemx box_itemy">00天</div>：
<div class="cyj_h box_itemx box_itemy">00时</div>：
<div class="cyj_m box_itemx box_itemy">00分</div>：
<div class="cyj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">感恩节：</div>
<div class="gej_d box_itemx box_itemy">00天</div>：
<div class="gej_h box_itemx box_itemy">00时</div>：
<div class="gej_m box_itemx box_itemy">00分</div>：
<div class="gej_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">平安夜：</div>
<div class="pay_d box_itemx box_itemy">00天</div>：
<div class="pay_h box_itemx box_itemy">00时</div>：
<div class="pay_m box_itemx box_itemy">00分</div>：
<div class="pay_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">圣诞节：</div>
<div class="sdj_d box_itemx box_itemy">00天</div>：
<div class="sdj_h box_itemx box_itemy">00时</div>：
<div class="sdj_m box_itemx box_itemy">00分</div>：
<div class="sdj_s box_itemx box_itemy">00秒</div>
</div>
</div>
HMTL部分容易扩展，每一个节日单独一个DIV控制，天，时，分，秒，使用不同的className，以便于后面在获取的时候使用
<div class="box_item">
<div class="box_itemt box_itemx">建军节：</div>
<div class="jjj_d box_itemx box_itemy">00天</div>：
<div class="jjj_h box_itemx box_itemy">00时</div>：
<div class="jjj_m box_itemx box_itemy">00分</div>：
<div class="jjj_s box_itemx box_itemy">00秒</div>
</div>
HTML样式部分
<style type="text/css">
*{padding: 0;margin: 0;}
body{}
.clearr{clear: both;}
.box{width: 600px;margin: 100px auto;border: 1px #f1f1f1 solid;padding: 25px;}
.box_item{display: flex;justify-content: flex-start;align-items: center;margin-bottom: 15px;}
.box_itemx{padding: 5px 10px;}
.box_itemt{background: #2c3e50;color: #fff;}
.box_itemy{background: #000;color: #fff;}
</style>
样式部分可以根据自己需求自己修改
JavaScript部分
js部分分为几部进行
1.获取每个div里面代表天、时、分、秒的classname,使用函数querySelector()
let jr_d = document.querySelector(ds)
let jr_h = document.querySelector(hs)
let jr_m = document.querySelector(ms)
let jr_s = document.querySelector(ss)
2.通过计算活动时间和当前时间相差的秒数来分别获得相差的天、时、分、秒；然后将获得的值，通过innerHTML来修改DIV里的内容；因为要用到setInterval()函数，所以这个过程可以写成自定义函数countDown()
let start = +new Date(s_times)//自定义时间
let end = +new Date()//当前时间
let times = (start - end)/1000 //结束时间和开始时间相差的秒数
let d = parseInt(times/60/60/24)//相差天数
jr_d.innerHTML = bc(d)+'天'
let h = parseInt(times/60/60%24)
jr_h.innerHTML = bc(h)+'时'
jr_m.innerHTML = bc(m)+'分'
let s = parseInt(times%60)
jr_s.innerHTML = bc(s)+'秒'
3.其中获取到的天、时、分、秒，如果数值小于10的时候，稍微处理一下加个前导0；因为每个都要处理，可以用个自定义函数进行处理：bc()
function bc(b){
return b= b < 10? '0'+b:b
}
4.通过setInterval(countDown,1000)来动态的修改DIV里的天、时、分、秒内容。
let djs = setInterval(function(){
countDown(s_times)
}, 1000);
5.活动计时的时候，如果说计时结束了，我们可以通过清除setInterval(),然后给天、时、分、秒对应的DIV复制特定的内容，来表示倒计时结束了
if(times<0){
jr_d.innerHTML ='时'
jr_h.innerHTML ='间'
jr_m.innerHTML ='到'
jr_s.innerHTML ='了'
clearInterval(djs)
}
6.小技巧：因为setInterval()是在1000毫秒后再执行的，那么在页面刚刷新的时候，页面的内容是不会变化的，那么这个时候可以在之前，先把countDown()执行一次，这样就可以避免这个问题了。
7.最后：将上面的整个过程进行封装：这样增加新的日期的时候，只需要将天、时、分、秒对应的div的classname和活动时间作为参数传给函数就可以了。这样多个日期也不会有冲突了，也便于移植和在其它的页面调用。
整个代码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>js-倒计时</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{}
.clearr{clear: both;}
.box{width: 600px;margin: 100px auto;border: 1px #f1f1f1 solid;padding: 25px;}
.box_item{display: flex;justify-content: flex-start;align-items: center;margin-bottom: 15px;}
.box_itemx{padding: 5px 10px;}
.box_itemt{background: #2c3e50;color: #fff;}
.box_itemy{background: #000;color: #fff;}
</style>
</head>
<body>
<div class="box">
<div class="box_item">
<div class="box_itemt box_itemx">建军节：</div>
<div class="jjj_d box_itemx box_itemy">00天</div>：
<div class="jjj_h box_itemx box_itemy">00时</div>：
<div class="jjj_m box_itemx box_itemy">00分</div>：
<div class="jjj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">鬼节：</div>
<div class="zqj_d box_itemx box_itemy">00天</div>：
<div class="zqj_h box_itemx box_itemy">00时</div>：
<div class="zqj_m box_itemx box_itemy">00分</div>：
<div class="zqj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">教师节：</div>
<div class="jsj_d box_itemx box_itemy">00天</div>：
<div class="jsj_h box_itemx box_itemy">00时</div>：
<div class="jsj_m box_itemx box_itemy">00分</div>：
<div class="jsj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">国庆节：</div>
<div class="gqj_d box_itemx box_itemy">00天</div>：
<div class="gqj_h box_itemx box_itemy">00时</div>：
<div class="gqj_m box_itemx box_itemy">00分</div>：
<div class="gqj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">重阳节：</div>
<div class="cyj_d box_itemx box_itemy">00天</div>：
<div class="cyj_h box_itemx box_itemy">00时</div>：
<div class="cyj_m box_itemx box_itemy">00分</div>：
<div class="cyj_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">铺花生日：</div>
<div class="ph_d box_itemx box_itemy">00天</div>：
<div class="ph_h box_itemx box_itemy">00时</div>：
<div class="ph_m box_itemx box_itemy">00分</div>：
<div class="ph_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">感恩节：</div>
<div class="gej_d box_itemx box_itemy">00天</div>：
<div class="gej_h box_itemx box_itemy">00时</div>：
<div class="gej_m box_itemx box_itemy">00分</div>：
<div class="gej_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">平安夜：</div>
<div class="pay_d box_itemx box_itemy">00天</div>：
<div class="pay_h box_itemx box_itemy">00时</div>：
<div class="pay_m box_itemx box_itemy">00分</div>：
<div class="pay_s box_itemx box_itemy">00秒</div>
</div>
<div class="box_item">
<div class="box_itemt box_itemx">圣诞节：</div>
<div class="sdj_d box_itemx box_itemy">00天</div>：
<div class="sdj_h box_itemx box_itemy">00时</div>：
<div class="sdj_m box_itemx box_itemy">00分</div>：
<div class="sdj_s box_itemx box_itemy">00秒</div>
</div>
</div>
<script type="text/javascript">
function jsq(ds,hs,ms,ss,s_time){
let jr_d = document.querySelector(ds)
let jr_h = document.querySelector(hs)
let jr_m = document.querySelector(ms)
let jr_s = document.querySelector(ss)
let s_times = s_time
countDown(s_times)
function bc(b){
return b= b < 10? '0'+b:b
}
let djs = setInterval(function(){
countDown(s_times)
}, 1000);
function countDown(s_times){
let start = +new Date(s_times)//自定义时间
let end = +new Date()//当前时间
let times = (start - end)/1000 //结束时间和开始时间相差的秒数
let d = parseInt(times/60/60/24)//相差天数
jr_d.innerHTML = bc(d)+'天'
let h = parseInt(times/60/60%24)
jr_h.innerHTML = bc(h)+'时'
let m = parseInt(times/60%60)
jr_m.innerHTML = bc(m)+'分'
let s = parseInt(times%60)
jr_s.innerHTML = bc(s)+'秒'
if(times<0){
jr_d.innerHTML ='时'
jr_h.innerHTML ='间'
jr_m.innerHTML ='到'
jr_s.innerHTML ='了'
clearInterval(djs)
}
}
}
jsq('.jjj_d','.jjj_h','.jjj_m','.jjj_s','2020-08-01 00:00:00')
jsq('.zqj_d','.zqj_h','.zqj_m','.zqj_s','2020-09-02 00:00:00')
jsq('.jsj_d','.jsj_h','.jsj_m','.jsj_s','2020-09-10 00:00:00')
jsq('.gqj_d','.gqj_h','.gqj_m','.gqj_s','2020-10-01 00:00:00')
jsq('.cyj_d','.cyj_h','.cyj_m','.cyj_s','2020-10-25 00:00:00')
jsq('.ph_d','.ph_h','.ph_m','.ph_s','2020-12-29 00:00:00')
jsq('.gej_d','.gej_h','.gej_m','.gej_s','2020-11-26 00:00:00')
jsq('.pay_d','.pay_h','.pay_m','.pay_s','2020-12-24 00:00:00')
jsq('.sdj_d','.sdj_h','.sdj_m','.sdj_s','2020-11-25 00:00:00')
</script>
</body>
</html>
