要实现一个标签或者按钮进行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 更适合当前的场景。