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

前端技术 2023/09/06 JavaScript

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

特别说明:

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

html代码

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

js对cookie的操作 

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

主要逻辑代码

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

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

本文地址：https://www.stayed.cn/item/16969

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案