zoukankan      html  css  js  c++  java
  • 简单的倒计时

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

    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>

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

  • 相关阅读:
    HttpClient上传文件(转)
    数据库查询结果导出到excel
    docker报错“net/http: TLS handshake timeout”
    java线程的几个状态和锁的作用范围
    简单管理WPF及Winform所有弹出窗体
    FastJson学习
    基于消息中间件实现流量削峰
    pandas
    DBSCAN
    A value is trying to be set on a copy of a slice from a DataFrame. Try using .loc[row_indexer,col_indexer] = value instead
  • 原文地址:https://www.cnblogs.com/smile-xin/p/11364276.html
Copyright © 2011-2022 走看看