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

<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>