简单的倒计时

上篇写到了倒计时的效果实现,现在分享一个简单的倒计时案例,不多说直接上代码

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>

可能有点粗略,请大家多多包涵

猜你喜欢

转载自www.cnblogs.com/smile-xin/p/11364276.html
0条评论
添加一条新回复