js實現發送驗證碼後的倒計時功能，js驗證碼

js實現發送驗證碼後的倒計時功能，js驗證碼

之前分享過只用js實現倒計時的功能,後來測試時發現,重新整理或關閉網頁後,倒計時就不能用了.網上也沒找到合適的解決方案,所以自己就寫了個,這次的算是最佳化版吧,能滿足重新整理或重新開啟網頁後,倒計時依然能用

特別說明:

     cookie最初建立的有效時間是60秒.也就是說,你如果在倒計時為20的時候,關閉網頁.20秒之後再開啟,是不會有倒計時顯示的;但是,如果倒計時為20時,關閉頁面,如果在20秒內重新開啟頁面,是有倒計時顯示的.

html代碼

<input id="second" type="button" value="免費擷取驗證碼" />

js對cookie的操作

//發送驗證碼時添加cookiefunction addCookie(name,value,expiresHours){   var cookieString=name+"="+escape(value);   //判斷是否設定到期時間,0代表關閉瀏覽器時失效  if(expiresHours>0){     var date=new Date();     date.setTime(date.getTime()+expiresHours*1000);     cookieString=cookieString+";expires=" + date.toUTCString();   }     document.cookie=cookieString; } //修改cookie的值function editCookie(name,value,expiresHours){   var cookieString=name+"="+escape(value);   if(expiresHours>0){    var date=new Date();    date.setTime(date.getTime()+expiresHours*1000); //單位是毫秒   cookieString=cookieString+";expires=" + date.toGMTString();   }    document.cookie=cookieString; } //根據名字擷取cookie的值function getCookieValue(name){    var strCookie=document.cookie;    var arrCookie=strCookie.split("; ");    for(var i=0;i<arrCookie.length;i++){     var arr=arrCookie[i].split("=");     if(arr[0]==name){     return unescape(arr[1]);     break;    }else{       return "";        break;     }    }     }

主要邏輯代碼

$(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);//開始倒計時  }}//將手機利用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) {     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;  }}

以上所述就是本文的全部內容了，希望大家能夠喜歡。