原生js實現倒計時功能

　 最近寫的商品頁面需要倒計時功能（day：hour：min：sec），直接上代碼：

• 實現效果

 

　　倒計時就會涉及到時間日期的操作，js 中使用  new Date() 來創建各種格式的時間日期。實現倒計時，就必須要計算出終止時間和起始時間的的時間差。假設我們以當前電腦的時間作為起始時間，然后自己定一個終止時間，就可以算出時間差了。再利用時間差算出天、時、分、秒。整體思路不難理解，不過真正實現其代碼來還是有諸多需要注意的。

• index.html

<div class="se-kl">
            <div class="se-info">EXPRIES IN:</div>
                <div class="se-count">
                    <div class="se-day"><span class="se-txt">00</span></div>
                    <span class="sm sm_01">:</span>
                    <div class="se-hour"><span class="se-txt">00</span></div>
                    <span class="sm sm_02">:</span>
                    <div class="se-min"><span class="se-txt">00</span></div>
                    <span class="sm sm_03">:</span>
                    <div class="se-sec"><span class="se-txt">00</span></div>
            </div>
 </div>

• css代碼

.se-kl { width: 218px; height: 110px; margin: 20px auto 20px auto; position: relative; display: flex; justify-content: center;}
.se-info { position: absolute; top: 15px; text-align: center; width: 100%; font-size: 16px; color: #fff; font-weight: 1000; }
.se-count { position: absolute; top: 40px; left: 22px; height: 40px; font-size: 20px;}
.se-day{ position:relative;}
.sm{ font-size: 16px;color: #fff; }
.sm_01{ position:absolute;top: 20%;left: 22%; }
.sm_02{ position:absolute;top: 20%;left: 47%;}
.sm_03{ position:absolute;top: 20%;left: 72%;}
.se-day,
.se-hour, 
.se-min,
.se-sec { position: relative; width: 40px; height: 40px; float: left; text-align: center; line-height: 40px; margin-right: 5px; }
.se-txt { font-size: 24px; font-weight: bold; color: #fff; }

注：因為在商品頁面寫的，所以用了比較多的定位，可忽略。

• js代碼

var spans=document.getElementsByClassName("se-txt");
var endTime=new Date('2020/10/2 16:43:00');//未來時間
var timer=null;

clearInterval(timer);
timer =setInterval(countTime,1000);

function countTime(){
    var nowTime=new Date();//現在時間
    var lastTime=parseInt((endTime-nowTime)/1000);//剩余時間=未來時間-現在時間（未來時間距離現在的秒數）
    if(lastTime>=0){
        var day=parseInt(lastTime/60/60/24);//換算成天數，一天有86400秒
        var hour=parseInt(lastTime/60/60%24);//余數代表剩下的小時
        var min=parseInt(lastTime/60%60);//代表分鍾
        var sec=parseInt(lastTime%60);//代表秒數
        //給不足10的數前面添加一個0
        if(day <10){ 
             day="0"+day; 
        } 
        if(hour <10){ 
            hour ="0"+hour; 
        } 
        if(min <10){ 
            min ="0"+min; 
        } 
        if(sec <10){
            sec="0" + sec; 
        } 
        // console.log(day);
        // console.log(hour);
        spans[0].innerHTML=day;//向對象“se-txt”插入內容
        spans[1].innerHTML=hour;
        spans[2].innerHTML=min;
        spans[3].innerHTML=sec;
    }else{
        clearInterval(timer);//清除時間
    }
}