首页 > 编程 > JavaScript > 正文

js实现发送验证码后的倒计时功能

2019-11-20 12:23:34
字体:
来源:转载
供稿:网友

之前分享过只用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记录,有效时间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;  }}

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表