HTML利用JS制作发送验证码倒计时特效

发送验证码的事情,由ajax的URL给后台处理;

倒计时为0时,需要return,否则会一直循环倒计时;

<div class="form-group">
				<label for="exampleInputName2">邮箱地址</label> <input type="text"
					class="form-control" id="phone" placeholder="请输入电子邮箱" />
</div>	
<input type="button" id="btn" value="发送验证码" onclick="settime(this),send()" /> 
 <script type="text/javascript">
        function send(){
            $.ajax({
                url:"sendMessage",
                type:"GET",
                data:"phone="+$("#phone").val(),
                success:function(msg){
                	alert("发送邮件了");
                }
            });
        }
        var countdown=10;
        function settime(val) { 
            if (countdown == 0) { 
                val.removeAttribute("disabled"); 
                val.value="免费获取验证码"; 
                countdown = 10;
                return;
            } else { 
                val.setAttribute("disabled", true); 
                val.value="重新发送(" + countdown + ")"; 
                countdown--; 
            } 
            setTimeout(function() { 
                settime(val) },1000)} 
    </script> 
    ```
    

猜你喜欢

转载自blog.csdn.net/qq_17369545/article/details/100891176