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>

这边穿梭进入演示空间