• 原生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里显示出来,需要注意的就是要这个时间差不可能为负数,所以,一定要做判断!

    好了,今天就到这里了!

  • 相关阅读:
    ABP文档
    SqlServer英文单词全字匹配
    npm不是以管理身份运行遇到的问题
    concurrenthashmap jdk1.8
    HashSet源码分析 jdk1.6
    Iterator设计模式--jdk1.7
    代理模式
    高并发下的HashMap,ConcurrentHashMap
    HashMap源码分析jdk1.6
    Stack&Vector源码分析 jdk1.6
  • 原文地址:https://www.cnblogs.com/web001/p/8179086.html
Copyright © 2020-2023  润新知