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记录,有效时间60ssettime（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;}}

以上所述就是本文的全部内容了，希望大家能够喜欢。