首页登陆欢迎您!
首页登陆 > 运维知识 > js实现发送验证码后的倒计时功能_javascript技巧_脚本之家

js实现发送验证码后的倒计时功能_javascript技巧_脚本之家

时间:2019-12-06

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

特别说明:

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

html代码

js对cookie的操作

//发送验证码时添加cookiefunction addCookie(name,value,expiresHours){ var cookieString=name+"="+escape; //判断是否设置过期时间,0代表关闭浏览器时失效 if{ var date=new Date(); date.setTime+expiresHours*1000); cookieString=cookieString+";expires=" + date.toUTCString(); } document.cookie=cookieString; } //修改cookie的值function editCookie(name,value,expiresHours){ var cookieString=name+"="+escape; if{ var date=new Date(); date.setTime+expiresHours*1000); //单位是毫秒 cookieString=cookieString+";expires=" + date.toGMTString(); } document.cookie=cookieString; } //根据名字获取cookie的值function getCookieValue{ var strCookie=document.cookie; var arrCookie=strCookie.split; for(var i=0;i主要逻辑代码${ $.click{ sendCode; v = getCookieValue;//获取cookie值 if{ settime;//开始倒计时 }})//发送验证码function sendCode{ var phonenum = $; var result = isPhoneNum{ doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum}); addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s settime;//开始倒计时 }}//将手机利用ajax提交到后台的发短信接口function doPostBack(url,backFunc,queryParam) { $.ajax({ async : false, cache : false, type : 'POST', url : url,// 请求的action路径 data:queryParam, error : function() {// 请求失败处理函数 }, success : backFunc });}function backFunc1{ var d = $.parseJSON{ alert; }else{//返回验证码 alert; $; }}//开始倒计时var countdown;function settime { countdown=getCookieValue; if  { obj.removeAttr; obj.val; return; } else { obj.attr; obj.val("重新发送; countdown--; editCookie("secondsremained",countdown,countdown+1); } setTimeout { settime //每1000毫秒执行一次} //校验手机号是否合法function isPhoneNum(){ var phonenum = $; var myreg = /^||$/; if){ alert; return false; }else{ return true; }}

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

上一篇:jquery完成客商打分评分特效_jquery_脚本之家 下一篇:没有了