js实现发送验证码后的倒计时功能
之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用
特别说明:
cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.
html代码
<inputid="second"type="button"value="免费获取验证码"/>
js对cookie的操作
//发送验证码时添加cookie functionaddCookie(name,value,expiresHours){ varcookieString=name+"="+escape(value); //判断是否设置过期时间,0代表关闭浏览器时失效 if(expiresHours>0){ vardate=newDate(); date.setTime(date.getTime()+expiresHours*1000); cookieString=cookieString+";expires="+date.toUTCString(); } document.cookie=cookieString; } //修改cookie的值 functioneditCookie(name,value,expiresHours){ varcookieString=name+"="+escape(value); if(expiresHours>0){ vardate=newDate(); date.setTime(date.getTime()+expiresHours*1000);//单位是毫秒 cookieString=cookieString+";expires="+date.toGMTString(); } document.cookie=cookieString; } //根据名字获取cookie的值 functiongetCookieValue(name){ varstrCookie=document.cookie; vararrCookie=strCookie.split(";"); for(vari=0;i<arrCookie.length;i++){ vararr=arrCookie[i].split("="); if(arr[0]==name){ returnunescape(arr[1]); break; }else{ return""; break; } } }
主要逻辑代码
$(function(){ $("#second").click(function(){ sendCode($("#second")); }); v=getCookieValue("secondsremained");//获取cookie值 if(v>0){ settime($("#second"));//开始倒计时 } }) //发送验证码 functionsendCode(obj){ varphonenum=$("#phonenum").val(); varresult=isPhoneNum(); if(result){ doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum}); addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s settime(obj);//开始倒计时 } } //将手机利用ajax提交到后台的发短信接口 functiondoPostBack(url,backFunc,queryParam){ $.ajax({ async:false, cache:false, type:'POST', url:url,//请求的action路径 data:queryParam, error:function(){//请求失败处理函数 }, success:backFunc }); } functionbackFunc1(data){ vard=$.parseJSON(data); if(!d.success){ alert(d.msg); }else{//返回验证码 alert("模拟验证码:"+d.msg); $("#code").val(d.msg); } } //开始倒计时 varcountdown; functionsettime(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毫秒执行一次 } //校验手机号是否合法 functionisPhoneNum(){ varphonenum=$("#phonenum").val(); varmyreg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if(!myreg.test(phonenum)){ alert('请输入有效的手机号码!'); returnfalse; }else{ returntrue; } }
以上所述就是本文的全部内容了,希望大家能够喜欢。