js-倒計(jì)時(shí)是比較常用的一個(gè)js小功能，有的時(shí)候，公司需要進(jìn)行活動(dòng)倒計(jì)時(shí)的時(shí)候，會(huì)需要在頁(yè)面顯示出來(lái)。有的時(shí)候是需要1個(gè)，有的時(shí)候可能需要多個(gè)。如果單獨(dú)寫一個(gè)比較簡(jiǎn)單，多個(gè)的時(shí)候，可能會(huì)重新很多代碼，因此，通過(guò)對(duì)js代碼的封裝為函數(shù)，每一個(gè)頁(yè)面需要的地方調(diào)用這個(gè)函數(shù)就會(huì)簡(jiǎn)單方便多了。

預(yù)覽效果

22.jpg

主要思路：使用setInterval()函數(shù)

setInterval(function(){},time)

HTML部分

    <div class="box">
        <div class="box_item">
            <div class="box_itemt box_itemx">建軍節(jié)：</div>
            <div class="jjj_d box_itemx box_itemy">00天</div>：
            <div class="jjj_h box_itemx box_itemy">00時(shí)</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">中元節(jié)：</div>
            <div class="zqj_d box_itemx box_itemy">00天</div>：
            <div class="zqj_h box_itemx box_itemy">00時(shí)</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">教師節(jié)：</div>
            <div class="jsj_d box_itemx box_itemy">00天</div>：
            <div class="jsj_h box_itemx box_itemy">00時(shí)</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">國(guó)慶節(jié)：</div>
            <div class="gqj_d box_itemx box_itemy">00天</div>：
            <div class="gqj_h box_itemx box_itemy">00時(shí)</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">重陽(yáng)節(jié)：</div>
            <div class="cyj_d box_itemx box_itemy">00天</div>：
            <div class="cyj_h box_itemx box_itemy">00時(shí)</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">感恩節(jié)：</div>
            <div class="gej_d box_itemx box_itemy">00天</div>：
            <div class="gej_h box_itemx box_itemy">00時(shí)</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時(shí)</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">圣誕節(jié)：</div>
            <div class="sdj_d box_itemx box_itemy">00天</div>：
            <div class="sdj_h box_itemx box_itemy">00時(shí)</div>：
            <div class="sdj_m box_itemx box_itemy">00分</div>：
            <div class="sdj_s box_itemx box_itemy">00秒</div>
        </div>
    </div>  

HMTL部分容易擴(kuò)展，每一個(gè)節(jié)日單獨(dú)一個(gè)DIV控制，天，時(shí)，分，秒，使用不同的className，以便于后面在獲取的時(shí)候使用

<div class="box_item">
            <div class="box_itemt box_itemx">建軍節(jié)：</div>
            <div class="jjj_d box_itemx box_itemy">00天</div>：
            <div class="jjj_h box_itemx box_itemy">00時(shí)</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>

樣式部分可以根據(jù)自己需求自己修改

JavaScript部分

js部分分為幾部進(jìn)行
1.獲取每個(gè)div里面代表天、時(shí)、分、秒的classname,使用函數(shù)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.通過(guò)計(jì)算活動(dòng)時(shí)間和當(dāng)前時(shí)間相差的秒數(shù)來(lái)分別獲得相差的天、時(shí)、分、秒；然后將獲得的值，通過(guò)innerHTML來(lái)修改DIV里的內(nèi)容；因?yàn)橐玫絪etInterval()函數(shù)，所以這個(gè)過(guò)程可以寫成自定義函數(shù)countDown()

let start = +new Date(s_times)//自定義時(shí)間
let end = +new Date()//當(dāng)前時(shí)間
let times = (start - end)/1000 //結(jié)束時(shí)間和開始時(shí)間相差的秒數(shù)
let d = parseInt(times/60/60/24)//相差天數(shù)
jr_d.innerHTML = bc(d)+'天'
let h = parseInt(times/60/60%24)
jr_h.innerHTML = bc(h)+'時(shí)'
jr_m.innerHTML = bc(m)+'分'
let s = parseInt(times%60)
jr_s.innerHTML = bc(s)+'秒'

3.其中獲取到的天、時(shí)、分、秒，如果數(shù)值小于10的時(shí)候，稍微處理一下加個(gè)前導(dǎo)0；因?yàn)槊總€(gè)都要處理，可以用個(gè)自定義函數(shù)進(jìn)行處理：bc()

function bc(b){
    return b= b < 10? '0'+b:b
}

4.通過(guò)setInterval(countDown,1000)來(lái)動(dòng)態(tài)的修改DIV里的天、時(shí)、分、秒內(nèi)容。

let djs = setInterval(function(){
    countDown(s_times)
}, 1000);

5.活動(dòng)計(jì)時(shí)的時(shí)候，如果說(shuō)計(jì)時(shí)結(jié)束了，我們可以通過(guò)清除setInterval(),然后給天、時(shí)、分、秒對(duì)應(yīng)的DIV復(fù)制特定的內(nèi)容，來(lái)表示倒計(jì)時(shí)結(jié)束了

if(times<0){
    jr_d.innerHTML ='時(shí)'
    jr_h.innerHTML ='間'
    jr_m.innerHTML ='到'
    jr_s.innerHTML ='了'
    clearInterval(djs)
}

6.小技巧：因?yàn)閟etInterval()是在1000毫秒后再執(zhí)行的，那么在頁(yè)面剛刷新的時(shí)候，頁(yè)面的內(nèi)容是不會(huì)變化的，那么這個(gè)時(shí)候可以在之前，先把countDown()執(zhí)行一次，這樣就可以避免這個(gè)問(wèn)題了。
7.最后：將上面的整個(gè)過(guò)程進(jìn)行封裝：這樣增加新的日期的時(shí)候，只需要將天、時(shí)、分、秒對(duì)應(yīng)的div的classname和活動(dòng)時(shí)間作為參數(shù)傳給函數(shù)就可以了。這樣多個(gè)日期也不會(huì)有沖突了，也便于移植和在其它的頁(yè)面調(diào)用。

整個(gè)代碼

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>js-倒計(jì)時(shí)</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">建軍節(jié)：</div>
            <div class="jjj_d box_itemx box_itemy">00天</div>：
            <div class="jjj_h box_itemx box_itemy">00時(shí)</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">鬼節(jié)：</div>
            <div class="zqj_d box_itemx box_itemy">00天</div>：
            <div class="zqj_h box_itemx box_itemy">00時(shí)</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">教師節(jié)：</div>
            <div class="jsj_d box_itemx box_itemy">00天</div>：
            <div class="jsj_h box_itemx box_itemy">00時(shí)</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">國(guó)慶節(jié)：</div>
            <div class="gqj_d box_itemx box_itemy">00天</div>：
            <div class="gqj_h box_itemx box_itemy">00時(shí)</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">重陽(yáng)節(jié)：</div>
            <div class="cyj_d box_itemx box_itemy">00天</div>：
            <div class="cyj_h box_itemx box_itemy">00時(shí)</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時(shí)</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">感恩節(jié)：</div>
            <div class="gej_d box_itemx box_itemy">00天</div>：
            <div class="gej_h box_itemx box_itemy">00時(shí)</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時(shí)</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">圣誕節(jié)：</div>
            <div class="sdj_d box_itemx box_itemy">00天</div>：
            <div class="sdj_h box_itemx box_itemy">00時(shí)</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)//自定義時(shí)間
                    let end = +new Date()//當(dāng)前時(shí)間
                    let times = (start - end)/1000 //結(jié)束時(shí)間和開始時(shí)間相差的秒數(shù)
                    let d = parseInt(times/60/60/24)//相差天數(shù)
                    jr_d.innerHTML = bc(d)+'天'
                    let h = parseInt(times/60/60%24)
                    jr_h.innerHTML = bc(h)+'時(shí)'
                    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 ='時(shí)'
                        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>