js實現手機驗證碼傳送倒計時60秒無視頁面重新整理
阿新 • • 發佈：2019-02-10
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<!doctype html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script
src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<link href="css/forget.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- <link href="css/mdialog.css" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" type="text/css" href="css/mbox.css" />
<!--背景樣式 彈框樣式-->
<script type="text/javascript" src="js/jm-qi.js"></script>
<!--自定義彈框大小，提示資訊，樣式，icon。。。。-->
<!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<div class="login">
<div class="content">
<div class="ucSimpleHeader" style="text-align: center;">
<div class="trigger">
<font style="font-size: 16px; font-weight: bold;">找回密碼</font>
</div>
</div>
<form id="#mainForm1" class="mainForm mainForm1">
<div class="normalInput">
<!-- <input id="phonenum" type="text" value="" class="phone" maxlength="11" placeholder="實名認證編碼"/> -->
<input type="text" class="user" maxlength="11" id="username"
style="background-color: transparent" placeholder="實名認證編碼">
</div>
<div class="normalInput">
<!-- <input id="phonenum" type="text" value="" class="phone" maxlength="11" placeholder="手機號碼"/> -->
<input type="text" class="phone" maxlength="11" id="phonenum"
style="background-color: transparent" placeholder="手機號碼">
</div>
<span class="error error1"></span>
<div class="normalInput">
<input type="text" class="kapkey" maxlength="6"
style="background-color: transparent" placeholder="驗證碼"> <span
class="formLine"
style="text-align: center; background-color: #32A5E7;"><input
id="second" type="button" value="免費獲取驗證碼" onclick="settime(this)"
style="font-size: 12px; font-weight: bold; line-height: 15px; background-color: #32A5E7;" /></span>
</div>
<span class="error error2"></span>
<div class="normalInput">
<input type="text" class="password" maxlength="16"
autocomplete="off" placeholder="密碼"> <input
type="password" class="password1" maxlength="16"
autocomplete="off" placeholder="密碼"> <a id="pwdBtn"
href="##" class="pwdBtnShow" isshow="false"> <i class="i_icon"></i>
</a>
</div>
<span class="error error3"></span>
<div class="rememberField">
<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
<i class="i_icon"></i>
</span>
</div>
<a href="#" class="fullBtnBlue">提交</a>
</form>
</div>
</div>
<div id="mz_Float">
<div class="mz_FloatBox">
<div class="mz3AngleL">
<i class="i_icon"></i>
</div>
<div class="mzFloatTip bRadius2">長度為8-16個字元，區分大小寫，至少包含兩種型別</div>
</div>
</div>
<script>
//傳送驗證碼時新增cookie
function addCookie(name, value, expiresHours) {
//判斷是否設定過期時間,0代表關閉瀏覽器時失效
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000);
$.cookie(name, escape(value), {
expires : date
});
} else {
$.cookie(name, escape(value));
}
}
//修改cookie的值
function editCookie(name, value, expiresHours) {
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000); //單位是毫秒
$.cookie(name, escape(value), {
expires : date
});
} else {
$.cookie(name, escape(value));
}
}
//根據名字獲取cookie的值
function getCookieValue(name) {
return $.cookie(name);
}
$(function() {
$("#second").click(function() {
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//獲取cookie值
if (v > 0) {
settime($("#second"));//開始倒計時
}
})
//傳送驗證碼
function sendCode(obj) {
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if (result) {
doPostBack("${pageContext.request.contextPath}/MessageServlet",backFunc1,{"phone":phonenum});
addCookie("secondsremained", 10, 10);//新增cookie記錄,有效時間60s
settime(obj);//開始倒計時
}
}
//將手機利用ajax提交到後臺的發簡訊介面
function doPostBack(url, backFunc, queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url :url ,// 請求的action路徑
data : queryParam,
error : function() {// 請求失敗處理函式
},
success : backFunc
});
}
function backFunc1(data) {
var d = $.parseJSON(data);
if (!d.success) {
alert(d.msg);
} else {//返回驗證碼
alert("模擬驗證碼:" + d.msg);
$("#code").val(d.msg);
}
}
//開始倒計時
var countdown;
function settime(obj) {
countdown = getCookieValue("secondsremained");
if (countdown == 0 || countdown == NaN || countdown == undefined) {
$(obj).removeAttr("disabled");
$(obj).val("免費獲取驗證碼");
return;
} else {
$(obj).attr("disabled", true);
$(obj).val("重新發送(" + countdown + ")");
countdown--;
editCookie("secondsremained", countdown, countdown + 1);
}
setTimeout(function() {
settime(obj);
}, 1000)///每1000毫秒執行一次
}
//校驗手機號是否合法
function isPhoneNum() {
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(phonenum)) {
alert('請輸入有效的手機號碼！');
return false;
} else {
return true;
}
}
</script>
<script>
$(".fullBtnBlue").on('click', function() {
$.mbox({
area : [ "350px", "auto" ], //彈框大小
border : [ 0, .5, "#666" ],
dialog : {
msg : "恭喜您，修改密碼成功！",
btns : 1, //1: 只有一個按鈕 2：兩個按鈕 3：沒有按鈕 提示框
type : 2, //1:對鉤 2：問號 3：歎號
btn : [ "確定" ], //自定義按鈕
yes : function() { //點選左側按鈕：成功
alert();
},
no : function() { //點選右側按鈕：失敗
return false;
}
}
});
});
</script>
</body>
</html>
pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<!doctype html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script
src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<link href="css/forget.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- <link href="css/mdialog.css" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" type="text/css" href="css/mbox.css" />
<!--背景樣式 彈框樣式-->
<script type="text/javascript" src="js/jm-qi.js"></script>
<!--自定義彈框大小，提示資訊，樣式，icon。。。。-->
<!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<div class="login">
<div class="content">
<div class="ucSimpleHeader" style="text-align: center;">
<div class="trigger">
<font style="font-size: 16px; font-weight: bold;">找回密碼</font>
</div>
</div>
<form id="#mainForm1" class="mainForm mainForm1">
<div class="normalInput">
<!-- <input id="phonenum" type="text" value="" class="phone" maxlength="11" placeholder="實名認證編碼"/> -->
<input type="text" class="user" maxlength="11" id="username"
style="background-color: transparent" placeholder="實名認證編碼">
</div>
<div class="normalInput">
<!-- <input id="phonenum" type="text" value="" class="phone" maxlength="11" placeholder="手機號碼"/> -->
<input type="text" class="phone" maxlength="11" id="phonenum"
style="background-color: transparent" placeholder="手機號碼">
</div>
<span class="error error1"></span>
<div class="normalInput">
<input type="text" class="kapkey" maxlength="6"
style="background-color: transparent" placeholder="驗證碼"> <span
class="formLine"
style="text-align: center; background-color: #32A5E7;"><input
id="second" type="button" value="免費獲取驗證碼" onclick="settime(this)"
style="font-size: 12px; font-weight: bold; line-height: 15px; background-color: #32A5E7;" /></span>
</div>
<span class="error error2"></span>
<div class="normalInput">
<input type="text" class="password" maxlength="16"
autocomplete="off" placeholder="密碼"> <input
type="password" class="password1" maxlength="16"
autocomplete="off" placeholder="密碼"> <a id="pwdBtn"
href="##" class="pwdBtnShow" isshow="false"> <i class="i_icon"></i>
</a>
</div>
<span class="error error3"></span>
<div class="rememberField">
<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
<i class="i_icon"></i>
</span>
</div>
<a href="#" class="fullBtnBlue">提交</a>
</form>
</div>
</div>
<div id="mz_Float">
<div class="mz_FloatBox">
<div class="mz3AngleL">
<i class="i_icon"></i>
</div>
<div class="mzFloatTip bRadius2">長度為8-16個字元，區分大小寫，至少包含兩種型別</div>
</div>
</div>
<script>
//傳送驗證碼時新增cookie
function addCookie(name, value, expiresHours) {
//判斷是否設定過期時間,0代表關閉瀏覽器時失效
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000);
$.cookie(name, escape(value), {
expires : date
});
} else {
$.cookie(name, escape(value));
}
}
//修改cookie的值
function editCookie(name, value, expiresHours) {
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000); //單位是毫秒
$.cookie(name, escape(value), {
expires : date
});
} else {
$.cookie(name, escape(value));
}
}
//根據名字獲取cookie的值
function getCookieValue(name) {
return $.cookie(name);
}
$(function() {
$("#second").click(function() {
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//獲取cookie值
if (v > 0) {
settime($("#second"));//開始倒計時
}
})
//傳送驗證碼
function sendCode(obj) {
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if (result) {
doPostBack("${pageContext.request.contextPath}/MessageServlet",backFunc1,{"phone":phonenum});
addCookie("secondsremained", 10, 10);//新增cookie記錄,有效時間60s
settime(obj);//開始倒計時
}
}
//將手機利用ajax提交到後臺的發簡訊介面
function doPostBack(url, backFunc, queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url :url ,// 請求的action路徑
data : queryParam,
error : function() {// 請求失敗處理函式
},
success : backFunc
});
}
function backFunc1(data) {
var d = $.parseJSON(data);
if (!d.success) {
alert(d.msg);
} else {//返回驗證碼
alert("模擬驗證碼:" + d.msg);
$("#code").val(d.msg);
}
}
//開始倒計時
var countdown;
function settime(obj) {
countdown = getCookieValue("secondsremained");
if (countdown == 0 || countdown == NaN || countdown == undefined) {
$(obj).removeAttr("disabled");
$(obj).val("免費獲取驗證碼");
return;
} else {
$(obj).attr("disabled", true);
$(obj).val("重新發送(" + countdown + ")");
countdown--;
editCookie("secondsremained", countdown, countdown + 1);
}
setTimeout(function() {
settime(obj);
}, 1000)///每1000毫秒執行一次
}
//校驗手機號是否合法
function isPhoneNum() {
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(phonenum)) {
alert('請輸入有效的手機號碼！');
return false;
} else {
return true;
}
}
</script>
<script>
$(".fullBtnBlue").on('click', function() {
$.mbox({
area : [ "350px", "auto" ], //彈框大小
border : [ 0, .5, "#666" ],
dialog : {
msg : "恭喜您，修改密碼成功！",
btns : 1, //1: 只有一個按鈕 2：兩個按鈕 3：沒有按鈕 提示框
type : 2, //1:對鉤 2：問號 3：歎號
btn : [ "確定" ], //自定義按鈕
yes : function() { //點選左側按鈕：成功
alert();
},
no : function() { //點選右側按鈕：失敗
return false;
}
}
});
});
</script>
</body>
</html>