原生js处理倒计时小实例

Posted 2020-10-19 麦兜家园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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里显示出来，需要注意的就是要这个时间差不可能为负数，所以，一定要做判断！

好了，今天就到这里了！

以上是关于原生js处理倒计时小实例的主要内容，如果未能解决你的问题，请参考以下文章