效果
前言
在我们的日常生活中,互联网已经深入到方方面面,无论是与银行卡相关的验证,还是日常聊天软件的登录,都需要验证码,因此,验证码获取的倒计时按钮应运而生。
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 获取验证码 倒计时</title>
<style>
#btn {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<input id="myInput" type="number" required placeholder="请输入验证码" />
<button id="button">发送验证码</button>
</div>
<script>
window.onload = () => {
// 发送验证码
// 获取元素
let btn = document.getElementById("button");
// 声明定时器变量
let timer;
// 添加单击事件
btn.addEventListener('click', function () {
// 设置倒计时时间 可根据实际情况调整 这里设置为 5s 是为了方便测试
let time = 5;
// 禁用按钮
btn.disabled = true;
btn.style.cursor = 'not-allowed';
// 开启定时器
timer = setInterval(function () {
// 判断剩余时间
if (time == 0) {
// 清除定时器并复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送验证码';
btn.style.cursor = 'pointer';
} else {
btn.innerHTML = `${time}秒后可重新获取`;
time --;
}
}, 1000);
});
}
</script>
</body>
</html>