快捷導(dǎo)航

基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計(jì)時(shí)功能)

更新時(shí)間：2016年09月02日 09:25:37 作者：熊大熊二

這篇文章主要介紹了基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計(jì)時(shí)功能)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

下面一段代碼是小編給大家?guī)淼膉s發(fā)送短信驗(yàn)證碼后實(shí)現(xiàn)倒計(jì)時(shí)功能，代碼簡(jiǎ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="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>
//發(fā)送驗(yàn)證碼時(shí)添加cookie
function addCookie(name,value,expiresHours){ 
//判斷是否設(shè)置過期時(shí)間,0代表關(guān)閉瀏覽器時(shí)失效
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));
}
} 
//根據(jù)名字獲取cookie的值
function getCookieValue(name){ 
return $.cookie(name);
}
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//獲取cookie值
if(v>0){
settime($("#second"));//開始倒計(jì)時(shí)
}
})
//發(fā)送驗(yàn)證碼
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie記錄,有效時(shí)間60s
settime(obj);//開始倒計(jì)時(shí)
}
}
//開始倒計(jì)時(shí)
var countdown;
function settime(obj) { 
countdown=getCookieValue("secondsremained");
if (countdown == 0) { 
obj.removeAttr("disabled"); 
obj.val("免費(fèi)獲取驗(yàn)證碼"); 
return;
} else { 
obj.attr("disabled", true); 
obj.val("重新發(fā)送(" + countdown + ")"); 
countdown--;
editCookie("secondsremained",countdown,countdown+1);
} 
setTimeout(function() { settime(obj) },1000) //每1000毫秒執(zhí)行一次
} 
//校驗(yàn)手機(jī)號(hào)是否合法
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('請(qǐng)輸入有效的手機(jī)號(hào)碼！'); 
return false; 
}else{
return true;
}
}
</script>
</html>

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

您可能感興趣的文章: