js实现发送短信验证码后60秒倒计时
js实现发送短信验证码后60秒倒计时
效果图:
要多次点击只能在限定60秒内起一次作用,不能开启多个timer,这样效果会错乱
<div class="verification">
<label for="code"><i class="am-icon-code-fork"></i></label>
<input type="tel" name="" id="code" placeholder="请输入验证码">
<a class="btn" href="javascript:void(0);" id="sendMobileCode">
<span id="dyMobileButton">获取验证码</span>
</a>
</div>
JQuery的脚本语言
<script>
var time = 60;
var flag = true;
$('#dyMobileButton').click(function(){
$(this).attr("disabled",true);
if(flag){
var timer = setInterval(function () {
flag = false;
if(time == 0){
$("#dyMobileButton").removeAttr("disabled");
$("#dyMobileButton").html("免费获取验证码");
clearInterval(timer);
time = 60;
flag = true;
}else {
$("#dyMobileButton").html(time + " s 重新发送");
time--;
}
},1000);
}
});
</script>