js按钮点击后需要倒计时才能可能用代码实例
分类：实例代码
在不少的需要有手机或者邮箱验证功能的网站，当点击按钮给你发送验证码以后，会在一定的时间内，按钮是不可用的，需要倒计时一定时间之后才能够再次点击发送，下面就通过代码实例介绍一下如何实现此功能。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
var wait=60;
function time(ele) {
if (wait == 0) {
ele.removeAttribute("disabled");
ele.value="免费获取验证码";
wait = 60;
}
else {
ele.setAttribute("disabled", true);
ele.value=wait+"秒后可以重新发送";
wait--;
setTimeout(function() {
time(ele)
},1000)
}
}
window.onload=function(){
var ele=document.getElementById("btn");
ele.onclick=function(){
time(this);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var wait=60，设置倒计时时间。
（2）.function time(ele){}，此方法实现了倒计时功能，参数是按钮对象。
（3）.if (wait == 0) {
ele.removeAttribute("disabled");
ele.value="免费获取验证码";
wait = 60;
}，如果wait等于0的话，那么就删除disabled属性，value属性孩子设置为"免费获取验证码"，wait再重置为60。
（4）.else{
ele.setAttribute("disabled", true);
ele.value=wait+"秒后可以重新发送";
wait--;
setTimeout(function() {
time(ele)
},1000)
}，如果wait没有等于0，那么就将按钮设置为不可用。同时设置按钮的value值。
wait--，wait值减一。
setTimeout(function() {
time(ele)
},1000)，采用递归的方式调用time(ele)方法。
二.相关阅读:
（1）.removeAttribute()方法可以参阅removeAttribute()一章节。
（2）.setAttribute()方法可以参阅setAttribute()一章节。
（3）.setTimeout()方法可以参阅setTimeout()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu