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 实现获取验证码 倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！