上篇写到了倒计时的效果实现,现在分享一个简单的倒计时案例,不多说直接上代码
HTML部分:
<div id="box"> <h1>倒计时</h1> <div class="container"> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> </div>
css部分:
#box{ width: 300px; height: 300px; margin: 200px auto; text-align: center; background: red; } .container{ height: 200px; /*margin: 200px auto;*/ display: flex; flex-direction: row; align-items: center; } .container span{ vertical-align: middle; background-color: #000000; color: #FFFFFF; flex-grow: 1; font-size: 28px; height: 50px; line-height: 50px; text-align: center; margin: 0px 10px; }
js部分:
<script>
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute'); var second=document.querySelector('.second'); var inputTime=+new Date('2019-8-16 24:00:00');//返回的是用户输入时间总的毫秒数 conutDown();//先调用该函数,防止第一次刷新页面有空白 //开启定时器 setInterval(conutDown,1000); function conutDown(){ var nowTime=+new Date();//返回当前时间总的毫秒数 //times是剩余时间总的秒数 var times=(inputTime - nowTime) / 1000; var h=parseInt(times / 60 /60 %24);//时 h=h<10?'0'+h:h;//三元表达式,若h小于10,在h变量前添一个0 hour.innerHTML=h; var m=parseInt(times / 60 % 60);//分 m=m<10?'0'+m:m; minute.innerHTML=m; var s=parseInt(times % 60 ); //秒 s=s<10?'0'+s:s; second.innerHTML=s; }
</script>
可能有点粗略,请大家多多包涵