js实现发送短信验证码后60秒倒计时

                     js实现发送短信验证码后60秒倒计时



效果图:

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>