短信验证码 ----- 点击发送并实现定时器

最新推荐文章于 2022-11-05 21:42:48 发布

Chaim_chen

最新推荐文章于 2022-11-05 21:42:48 发布

阅读量3k

点赞数

分类专栏：网易云短信文章标签：验证码短信

本文链接：https://blog.csdn.net/qq_38637558/article/details/78082404

版权

网易云短信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

来一个点击发送验证码，并实现倒计时功能，

这里写图片描述

jsp代码：

注意下路径与自己的匹配

  <script type="text/javascript" src="../static/js/jquery-1.7.2.min.js">

点击发送验证码会有一个URL请求，然后可以替换成自己的，就OK了。。

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2017/9/25
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="text" id="phone" placeholder="请输入手机号码"><input id="getCode" type="button" value="获取验证码"><br>
</body>
<script type="text/javascript" src="../static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#getCode").removeAttr("disabled");
        //发送验证码
        $("#getCode").click(function(){
            $.ajax({
                url:"messageServlet",
                data:{
                    "phone":$("#phone").val()
                },
                type:"post",
                async:false,
                dataType:"text",
                success : function(data) {
                    if(data=='true'){
                        alert("验证码发送成功，收到后请输入验证码");
                        time(this);
                    } else {
                        alert("验证码发送失败");
                    }
                },
                error : function() {
                    alert("error");
                    time(this);
                }
            });
        });
    })

    //验证码倒计时
    var wait = 120;
    function time(obj) {
        if(wait==0) {
            $("#getCode").removeAttr("disabled");
            $("#getCode").val("获取验证码");
            wait = 120;
        }else {
            $("#getCode").attr("disabled","true");
            $("#getCode").val(wait+"秒后重试");
            wait--;
            setTimeout(function() {     //倒计时方法
                time(obj);
            },1000);    //间隔为1s
        }
    }
</script>
</html>

然后上一篇写的是如何在后台发送验证码，如有需要可以查看上一篇博客。

不足之处还请多多指教！

Chaim_chen

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
短信验证码 ----- 点击发送并实现定时器

来一个点击发送验证码，并实现倒计时功能，jsp代码：注意下路径与自己的匹配 <script type="text/javascript" src="../static/js/jquery-1.7.2.min.js">点击发送验证码会有一个URL请求，然后可以替换成自己的，就OK了。。<%-- Created by IntelliJ IDEA. User: admin Date: 201
复制链接

扫一扫