码迷,mamicode.com
首页 > 其他好文 > 详细

简单的倒计时

时间:2019-08-16 15:41:48      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:用户输入   display   func   parse   ems   center   script   code   middle   

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

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>

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

简单的倒计时

标签:用户输入   display   func   parse   ems   center   script   code   middle   

原文地址:https://www.cnblogs.com/smile-xin/p/11364276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!