使用js完成点击获取动态码后按钮倒计时效果

注册登录时通常会要求用户填写手机号获取手机短信验证码，而没获取一条验证码，网站需要支付一定费用。

为防止恶意攻击造成不必要的开销，需要在获取验证码的按钮上进行控制。

我们通常所见到的是每隔60秒或90秒才能点击获取下一次短信验证码。

下面将用最简单的实例，完成该操作。

按钮：

<input type="button" id="getDynamic" οnclick="getDynamicCode(this);" value="点击发送动态码"/>

js代码：

<script type="text/javascript">
	var clock = '';
	var nums = 60;
	var btn;
	function getDynamicCode(thisButton) { //获取动态码
		btn = thisButton;
		btn.disabled = true; //将按钮置为不可点击
		btn.value = nums+'秒后可重新获取';
		clock = setInterval(doLoop, 1000); //一秒执行一次
	}
	function doLoop(){
		nums--;
		if(nums > 0){
			btn.value = nums+'秒后可重新获取';
		}else{
			clearInterval(clock); //清除js定时器
			btn.disabled = false;
			btn.value = '点击发送动态码';
			nums = 60; //重置时间
		}
	}
</script>

以上代码为点击获取手机验证码后，按钮变为不可用状态，60秒后解除不可用状态恢复原状态。

我们可以将js代码中的 nums=60 改为 nums=90，即为90秒后可用。