Jquery实现简单到计时功能(setTimeout,setInterval)
要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码:
倒计时:<span id="timeSpan1" style="color:red;font-size:20px">5</span>秒 倒计时:<span id="timeSpan2" style="color:red;font-size:20px">5</span>秒 <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script> $(function () { // setInterval 方法,需要给传当前的计时器变量,执行一次便可以自动重复执行,除非手动停止。 var timer = setInterval(function () { _testBysetInterval(timer) }, 1000); //setTimeout 方法,只执行一次,需要反复调用。 setTimeout(_testBysetTimeout , 1000); }) function _testBysetInterval(timer) { var $timeSpan = $("#timeSpan1"); time = parseInt($timeSpan.text()); time--; if (time <= 0) { $timeSpan.css("color", "gray") clearInterval(timer);//需要清除计时器 } else { $timeSpan.text(time); } } function _testBysetTimeout() { var $timeSpan = $("#timeSpan2"); var time = $timeSpan.text(); time = parseInt(time); time--; //如果到0的话 就停止计时,并且改变颜色 if (time <= 0) { $timeSpan.css("color", "gray"); } else { $timeSpan.text(time); setTimeout(_testBysetTimeout, 1000) //需要重复调用 } } </script>
到此,用两种方法实现了同样的效果。两种方法对比,setInterval 更适合当前的场景。
posted on 2014-03-27 23:21 Richard__Lee 阅读(1637) 评论(0) 编辑 收藏 举报