我要评论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 实现获取验证码 倒计时功能，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论