本文介绍如何使用 JavaScript 的 setInterval 定时器实现获取验证码的倒计时功能。通过控制按钮状态和文本更新，确保用户在规定时间内无法重复点击发送，提升交互体验与安全性。
JavaScript 实现获取验证码倒计时功能
利用 setInterval 定时器即可轻松实现该功能。
<style>
button{
background: #45BCF9;
color: #fff;
padding: 4px 10px;
border: none;
outline: none;
cursor: pointer;
}
button:hover{
background: #00a8fe;
}
button.disabled{
background: #000;
cursor: auto;
}
button.disabled:hover{
background: #000;
}
</style>
<button type="button" onclick="fn()">获取验证码</button>
<script>
function fn(){
var oBtn = document.getElementsByTagName('button')[0];
var time = 60;
var timer = null;
oBtn.innerHTML = time + '秒后重新发送';
oBtn.setAttribute('disabled', 'disabled'); // 禁用按钮
oBtn.setAttribute('class', 'disabled'); // 添加class 按钮样式变灰
timer = setInterval(function(){
// 定时器到底了 兄弟们回家啦
if(time == 1){
clearInterval(timer);
oBtn.innerHTML = '获取验证码';
oBtn.removeAttribute('disabled');
oBtn.removeAttribute('class');
}else{
time--;
oBtn.innerHTML = time + '秒后重新发送';
}
}, 1000)
}
</script>总结
上述内容介绍了利用 JavaScript 实现获取验证码倒计时的方法，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。同时感谢大家对本站的支持！