js实现发送短信验证码后的倒计时功能(无视页面刷新)

前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用
特别说明:
     cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.

标签： <无>

代码片段(3)[全屏查看所有代码]

1. [代码]这是页面上的发送验证码按钮     

?

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

2. [代码]js对cookie的操作     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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

3. [代码]主要逻辑代码     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

$( 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 ;      } }