• 简单的倒计时


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

    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>

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

  • 相关阅读:
    Vue实现上下整屏滚动效果
    Vue实现选项卡切换效果
    Vue中在main.js中引入字体图标问题
    Vue中的生命周期beforeDestory不触发问题
    Vue中解决移动端点击300毫秒延迟的问题
    Vue中全局和按需引入Echarts
    Vue组件间的通信
    Echarts图表属性设置
    JZOJ 6799. 【2014广州市选day2】game
    JZOJ 6798. 【2014广州市选day2】regions
  • 原文地址:https://www.cnblogs.com/smile-xin/p/11364276.html
Copyright © 2020-2023  润新知