昨天写了一个简单的不能循环走的倒计时,那么今天写一个添加了定时器之后的倒计时。先来看看布局的代码:
<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里显示出来,需要注意的就是要这个时间差不可能为负数,所以,一定要做判断!
好了,今天就到这里了!