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

最新推荐文章于 2023-07-29 09:20:31 发布

原创最新推荐文章于 2023-07-29 09:20:31 发布 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #邮件验证码 #倒计时

Java web开发实战技术专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个利用Ajax实现发送验证码到指定邮箱的功能，并结合JavaScript实现了发送按钮的倒计时效果，确保用户体验的同时，防止频繁请求。代码中详细展示了如何设置倒计时、禁用按钮以及通过Ajax调用后端接口发送邮件。

发送验证码的事情，由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> 
    ```