简单的倒计时 | 易学教程

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

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>

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

来源：https://www.cnblogs.com/smile-xin/p/11364276.html

标签

var函数