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

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>