JavaScript实现发送验证码后的倒计时功能详解编程语言

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用

特别说明:

     cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.

这是页面上的发送验证码按钮

<input id="second" type="button"  value="免费获取验证码"  />

js对cookie的操作

//发送验证码时添加cookie 
function 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; 
    } 
}