快捷導(dǎo)航

js實現(xiàn)發(fā)送驗證碼后的倒計時功能

更新時間：2015年05月28日 16:14:50 投稿：hebedich

本文解決方案的基本思路是點擊就將按鈕設(shè)為disabled,然后根據(jù)cookie判斷是否設(shè)置過期時間,將手機利用ajax提交到后臺的發(fā)短信接口，就可以了

之前分享過只用js實現(xiàn)倒計時的功能,后來測試時發(fā)現(xiàn),刷新或關(guān)閉網(wǎng)頁后,倒計時就不能用了.網(wǎng)上也沒找到合適的解決方案,所以自己就寫了個,這次的算是優(yōu)化版吧,能滿足刷新或重新打開網(wǎng)頁后,倒計時依然能用

特別說明:

cookie最初創(chuàng)建的有效時間是60秒.也就是說,你如果在倒計時為20的時候,關(guān)閉網(wǎng)頁.20秒之后再打開,是不會有倒計時顯示的;但是,如果倒計時為20時,關(guān)閉頁面,如果在20秒內(nèi)重新打開頁面,是有倒計時顯示的.

html代碼

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

js對cookie的操作

//發(fā)送驗證碼時添加cookie
function addCookie(name,value,expiresHours){ 
  var cookieString=name+"="+escape(value); 
  //判斷是否設(shè)置過期時間,0代表關(guān)閉瀏覽器時失效
  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; 
} 
//根據(jù)名字獲取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"));//開始倒計時
  }
})
//發(fā)送驗證碼
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提交到后臺的發(fā)短信接口
function doPostBack(url,backFunc,queryParam) {
  $.ajax({
    async : false,
    cache : false,
    type : 'POST',
    url : url,// 請求的action路徑
    data:queryParam,
    error : function() {// 請求失敗處理函數(shù)
    },
    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("重新發(fā)送(" + countdown + ")"); 
    countdown--;
    editCookie("secondsremained",countdown,countdown+1);
  } 
  setTimeout(function() { settime(obj) },1000) //每1000毫秒執(zhí)行一次
} 
//校驗手機號是否合法
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;
  }
}

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

您可能感興趣的文章: