天天看點

短信驗證碼 ----- 點選發送并實作定時器

來一個點選發送驗證碼,并實作倒計時功能,

短信驗證碼 ----- 點選發送并實作定時器

jsp代碼:

注意下路徑與自己的比對

<script type="text/javascript" src="../static/js/jquery-1.7.2.min.js">           
<%--
  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>
           
上一篇: bata1

繼續閱讀