javascript實現倒計時效果

分析：

1、要實現倒計時，所以需要用到 setInterval 定時器。

2、需要用到Date函數，計算出倒計時的小時數、分鐘數、秒數；再用 innerHTML 把倒計時的 小時數、分鐘數、秒數放入三個盒子裏顯示出來。

3、用定時器第一次執行時間隔1秒，頁面在此期間有空白，所以採用封裝函數的方式，先調用一次此函數。

4、時間到了清除定時器 clearInterval() ，加上忽大忽小的動畫。

HTML：

<div id="countdown">
        <span>0</span>
        <span>0</span>
        <span>0</span>
</div>

css：

#countdown{
        width:210px;
        height:100px;
}
#countdown span{
        width:60px;
        height:60px;
        float:left;
        margin: 20px 5px;
        background-color: #000;
        color:#fff;
        font-size: 20px;
        line-height: 60px;
        text-align: center;
}
 @keyframes timeUp{
        0%{transform:scale(1.2)}
        50%{transform:scale(1)}
        100%{transform: scale(1.2)}
}

JavaScript：

window.onload=function(){
        var div=document.getElementById("countdown");
        var span=div.getElementsByTagName("span");

        var inputTime=+new Date('2019-8-10 23:00');
        countDown(); //先執行一次，防止第一次刷新頁面有空白
        setInterval(countDown,1000);//定時器
        function countDown(){
            var nowTime=+new Date(); //返回當前時間中的毫秒數
            var times=(inputTime-nowTime)/1000; //剩餘時間總秒數

             if(times<=0){//時間到了
                 clearInterval(timer);//清除定時器
                for(var i=0;i<span.length;i++){
                    span[i].style.animation="timeUp 0.5s infinite";
                }
                return;
            }

            var h=parseInt(times/60/60%24); //小時
            h=h<10?'0'+h:h; //格式
            span[0].innerHTML=h;
            var m=parseInt(times/60%60);
            m=m<10?'0'+m:m;
            span[1].innerHTML=m;
            var s=parseInt(times%60);
            s=s<10?'0'+s:s;
            span[2].innerHTML=s;
        }
    }