目标:实现一个按钮点击,同时按钮禁用并显示倒计时的js功能函数。
分析:首先要有一个按钮,绑定一个事件,这个事件功能就是定时改变按钮显示值,同时禁止按钮进行二次点击。
此功能函数需要使用js周期调用函数 setTimeout 或则 setInterval,两个方法都可以实现定时改变显示值。
setTimeout 和 setInterval的区别是什么?其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次,而触发 setInterval 方法只要不执行clearInterval方法是不会停止的。
解决方案:
方法1:使用setTimeout方法
JS代码如下:
<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
//倒计时限制秒数
var countdown = 5;
var id;//该变量用作停止定时执行函数
function setTime(targetElement) {
if (countdown == 0) {
targetElement.removeAttribute("disabled");
targetElement.value = "免费获取验证码";
countdown = 5;
clearTimeout(id);//关闭定时执行函数
} else {
targetElement.setAttribute("disabled", true);
targetElement.value = "重新发送(" + countdown + ")";
countdown--;
id = setTimeout(function () { setTime(targetElement) }, 1000);//下次定时调用setTime
}
}
document.getElementById("btn").onclick = function () { setTime(this); }
</script>
该方法在每次改变按钮显示值后下次调用使用setTimeout方法定时调用。
方法2:使用setInterval方法
JS代码如下:
<input type="button" id="btn" value="免费获取验证码" onclick="setTime(this)" />
<script type="text/javascript">
function setTime(targetElement) {
//倒计时初始化秒数
var countdown = 5;
var id = setInterval(setCountdown, 1000, targetElement);
//设置倒计时
function setCountdown(targetElement) {
if (countdown == 0) {
targetElement.removeAttribute("disabled");
targetElement.value = "免费获取验证码";
countdown = 5;
clearInterval(id);//停止调用函数
} else {
targetElement.setAttribute("disabled", true);
targetElement.value = "重新发送(" + countdown + ")";
countdown--;
}
}
}
</script>
该方法按周期定时调用,等待时间为0的时候停止该周期调用函数。