JS 实现获取验证码 倒计时功能

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>

总结

以上所述是小编给大家介绍的JS 实现获取验证码 倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• JS实现验证码倒计时的注册页面
• JS实现用户注册时获取短信验证码和倒计时功能
• JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
• 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
• JS/jQ实现免费获取手机验证码倒计时效果
• js实现点击获取验证码倒计时效果
• js实现发送验证码后的倒计时功能