• 原生js处理倒计时小实例


    昨天写了一个简单的不能循环走的倒计时,那么今天写一个添加了定时器之后的倒计时。先来看看布局的代码:

    <style>
    .t1 { width:400px; }
    </style>
    
    <body>
      距离:<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />
      还剩:<input class="t1" type="text" />
      <input type="button" value="开始倒计时吧" />
    </body>

    js代码如下:

    <script>
            
            window.onload = function () {
                var aInp = document.getElementsByTagName('input');
                var iNow = null;
                var iNew = null;
                var t = 0;
                var str = '';
                var timer = null;
    
                aInp[2].onclick = function () {
                    iNew = new Date(aInp[0].value);
                    clearInterval( timer );
    
                    timer = setInterval (function (){
    
                        iNow = new Date();
                        t = Math.floor( ( iNew - iNow ) / 1000 );
    
                        if ( t >= 0 ) {//这个时间差要么大于或者等于0,不可能为负值
    
                            str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
    
                            aInp[1].value = str;
    
                        } else {
    
                            clearInterval( timer );
    
                        }
    
                    }, 1000);
                };
            };
        </script>

     

    当然我截的是静态图,效果就是倒计时时间会在input里显示出来,需要注意的就是要这个时间差不可能为负数,所以,一定要做判断!

    好了,今天就到这里了!

  • 相关阅读:
    斯特林反演
    子集计数
    快速求斯特林数总结(洛谷模板题解)
    min-25筛总结
    数学笔记
    [WC2018]即时战略(LCT,splay上二分)
    [WC2018]通道(乱搞,迭代)
    Python requests 多线程抓取 出现HTTPConnectionPool Max retires exceeded异常
    Python监控服务器利器--psutil
    gevent
  • 原文地址:https://www.cnblogs.com/web001/p/8179086.html
Copyright © 2020-2023  润新知