• 简单的倒计时


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

    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>

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

  • 相关阅读:
    FLV视频转换的利器 ffmpeg.exe
    ffmpeg参数设定解说
    SQL里加减日期
    SQL Server 获得影响行数
    CheckBoxList RadioButtonList 不生成table 表示
    SQL语句 从一个表读取数据,写入到另一个表的相同字段中
    ffmpeg和Mencoder使用实例小全
    执行存储过程出现:"不是有效的标识符。"
    SQL 格式化超长的字段
    js遍历选中的dom元素
  • 原文地址:https://www.cnblogs.com/smile-xin/p/11364276.html
Copyright © 2020-2023  润新知