js實現發送短信驗證碼後的倒計時功能(無視頁面刷新，頁面關閉不進行倒計時功能)

時間 2019-12-07

標籤實現發送短信驗證碼倒計時功能無視頁面刷新關閉進行欄目 JavaScript 简体版

原文原文鏈接

與我上個博客寫的有點類似css

<!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>

</head>
<body>
<input id="phonenum" type="text" value="18518181818"/>
<input id="second" type="button" value="免費獲取驗證碼" />
</body>html

   }
}
//修改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

}
//根據名字獲取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('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie記錄,有效時間60s
settime(obj);//開始倒計時
}
}
//開始倒計時
var countdown;
function settime(obj) {
countdown=getCookieValue("secondsremained");
if (countdown == 0) {
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>
</html>
cdn