分析:
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;
}
}