简单实现:点击获取验证码按钮,按钮出现倒计时的功能并变成不可点击,60s读完,按钮才恢复正常(无真正验证码,只单纯拓展setInterval)
先上效果图
html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box {
width: 500px;
height: 400px;
background-color: rgb(133, 240, 205);
margin: 50px 350px;
text-align: center;
}
input {
margin-top: 150px;
text-align: center;
}
#btn {
width: 100px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" value="请输入验证码" id="countText" />
<button id="btn">获取验证码</button>
</div>
</body>
</html>
JavaScript
<script>
//设置初始化倒计时为60s
var countdown = 60;
var timer = null;
var _btn = document.getElementById("btn");
_btn.onclick = function () {
//开启循环定时器
timer = setInterval(function () {
if (countdown > 0) {
_btn.disabled = true;
_btn.innerText = countdown-- + "秒后重发";
} else {
_btn.disabled = false;
_btn.innerText = "重新发送";
//清除定时器
clearInterval(timer);
//上面的代码已把countdown减为0,需重新时候设置时间方可重新倒计时
countdown = 60;
}
}, 1000);
};
</script>
定时器在进行下一次倒计时之前,一定要进行清除定时器clearInterval(),不然会出现第二个函数的定时器覆盖了第一个定时器,导致第一个定时器没有办法移除