javascript实现倒计时效果

分析:

1、要实现倒计时,所以需要用到 setInterval 定时器。

2、需要用到Date函数,计算出倒计时的小时数、分钟数、秒数;再用 innerHTML 把倒计时的 小时数、分钟数、秒数放入三个盒子里显示出来。

3、用定时器第一次执行时间隔1秒,页面在此期间有空白,所以采用封装函数的方式,先调用一次此函数。

4、时间到了清除定时器 clearInterval() ,加上忽大忽小的动画。

HTML:

0 0 0

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

 

你可能感兴趣的:(javascript实现倒计时效果)