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;
}
}
以上所述就是本文的全部内容了，希望大家能够喜欢。