<!DOCTYPE HTML>
<html>
<head>
<title>定时器：发送短信验证码案例</title>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<div>
<input type="text" />
<button id="btn">发送</botton>
</div>
<script>
var btn = document.getElementById('btn');
var num = 5;//设置一个全局变量
btn.addEventListener("click",function(){
this.disabled = true;//变成不可点击
var timer = null;//设置一个全局变量
timer = setInterval(function(){
if( num == -1) {
clearTimeout(timer);
btn.innerHTML = '发送';
btn.disabled = false;//变成可点击
num = 5;//这里需要把计时器还原，不然就不能重复使用了
}
else {
btn.innerHTML = '还有' + num + '秒可以再次点击';
num--;
}
}, 1000);//每秒调用一次自减
})
</script>
</body>
</html>
原创文章 22
获赞 4
访问量 2600