最近做了一個項目，其中有需求要求實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后倒計時功能，其中有個難點(diǎn)：要求關(guān)閉頁面也進(jìn)行倒計時。好吧，下面小編把jquery 發(fā)送驗(yàn)證碼倒計時的實(shí)現(xiàn)代碼分享給大家，大家可以參考下

今天測試提了一個bug，發(fā)送短信倒計時功能，要求關(guān)閉頁面也要進(jìn)行倒計時。這想到了，當(dāng)年我參與的周杰倫演唱會的先付先搶功能。與之類似，只不過，那個項目的時間都是服務(wù)器時間，本人目前有點(diǎn)偷懶，就用客戶端的時間了。

一下是完整的代碼，只不過在客戶端的效率不是很好。

<!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>
<!--<script src="jquery.min.js"></script>-->
<!-- <script src="jquery.cookie.js"></script>-->
<!-- <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<input id="phonenum" type="text" value="18518181818"/>
<input id="second" type="button" value="免費(fèi)獲取驗(yàn)證碼" />
</body>
<script>
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
checkCountdown();
})
//校驗(yàn)打開頁面的時候是否要繼續(xù)倒計時
function checkCountdown(){
var secondsremained = $.cookie("secondsremained");
if(secondsremained){
var date = new Date(unescape(secondsremained));
setCoutDown(date,$("#second"));
}
}
//發(fā)送驗(yàn)證碼
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
//加載ajax 獲取驗(yàn)證碼的方法
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
var date = new Date();
addCookie("secondsremained",date.toGMTString(),60);//添加cookie記錄,有效時間60s
setCoutDown(date,obj);
}
} 
var nowDate = null;
var time_difference = 0;
var count_down = 0;
function setCoutDown(date,obj) { 
nowDate = new Date();
time_difference = ((nowDate- date)/1000).toFixed(0);
count_down = 60 - time_difference;
console.log(count_down);
if(count_down<=0){
obj.removeAttr("disabled"); 
obj.val("免費(fèi)獲取驗(yàn)證碼"); 
addCookie("secondsremained","",60);//添加cookie記錄,有效時間60s
return;
}
obj.attr("disabled", true); 
obj.val("重新發(fā)送(" + count_down + ")"); 
setTimeout(function() { setCoutDown(date,obj) },1000) //每1000毫秒執(zhí)行一次
} 
//發(fā)送驗(yàn)證碼時添加cookie
function addCookie(name,value,expiresHours){ 
//判斷是否設(shè)置過期時間,0代表關(guān)閉瀏覽器時失效
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime()+expiresHours*1000); 
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
} 
//校驗(yàn)手機(jī)號是否合法
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('請輸入有效的手機(jī)號碼！'); 
return false; 
}else{
return true;
}
} 
</script>
</html>

以上所述是小編給大家介紹的基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計時功能(無視頁面關(guān)閉)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: