码迷,mamicode.com
首页 > Web开发 > 详细

原生js处理倒计时小实例

时间:2018-01-02 23:12:29      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:doc   div   document   new   timer   分享图片   class   循环   elements   

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

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

好了,今天就到这里了!

原生js处理倒计时小实例

标签:doc   div   document   new   timer   分享图片   class   循环   elements   

原文地址:https://www.cnblogs.com/web001/p/8179086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!