js实现发送验证码倒计时按钮

时间:2022-07-16 15:39:02

在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件,

必须让按钮隔一段时间后才能再次使用。

代码如下:

 <html>
<head>
<meta charset="utf-8">
<title>验证码按钮</title>
</head>
<body>
<button type="button" id="send">发送验证码</button>
<script type="text/javascript">
wait = 60;
function wait_time(btn) {
if (wait == 0) {
btn.removeAttribute("disabled");
btn.innerText = "发送验证码";
wait = 60;
} else {
btn.setAttribute("disabled", true);
btn.innerText = wait+"秒后重新发送";
wait--;
setTimeout(function(){wait_time(btn);},1000);
}
}
document.getElementById('send').onclick = function(){wait_time(this)};
</script>
</body>
</html>