之前分享过只用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;      }  }