js-倒计时-封装函数-配合HTML在页面显示多个节日倒计时

js-倒计时是比较常用的一个js小功能，有的时候，公司需要进行活动倒计时的时候，会需要在页面显示出来。有的时候是需要1个，有的时候可能需要多个。如果单独写一个比较简单，多个的时候，可能会重新很多代码，因此，通过对js代码的封装为函数，每一个页面需要的地方调用这个函数就会简单方便多了。

预览效果

22.jpg

主要思路：使用setInterval()函数

setInterval(function(){},time)

HTML部分

    

        

            
建军节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
中元节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
教师节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        

        
        

            
国庆节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
重阳节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
感恩节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
平安夜：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
圣诞节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
    
  

HMTL部分容易扩展，每一个节日单独一个DIV控制，天，时，分，秒，使用不同的className，以便于后面在获取的时候使用

            
建军节：
            
00天
：
            
00时
：
            
00分
：
            
00秒

HTML样式部分

样式部分可以根据自己需求自己修改

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和活动时间作为参数传给函数就可以了。这样多个日期也不会有冲突了，也便于移植和在其它的页面调用。

整个代码

    
    


    

        

            
建军节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
鬼节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
教师节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        

        
        

            
国庆节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
重阳节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        

            
铺花生日：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        

            
感恩节：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
平安夜：
            
00天
：
            
00时
：
            
00分
：
            
00秒
        
        
        

            
圣诞节：
            
00天
：
            
00时
：
            
00分
：
            
00秒