注册登录时通常会要求用户填写手机号获取手机短信验证码,而没获取一条验证码,网站需要支付一定费用。
为防止恶意攻击造成不必要的开销,需要在获取验证码的按钮上进行控制。
我们通常所见到的是每隔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秒后可用。