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


Posted in Javascript onMay 28, 2015

之前分享过只用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;
  }
}

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

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
jquery实现用户打分评分特效
May 28 #Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
javascript转换静态图片,增加粒子动画效果
May 28 #Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
js精度溢出解决方案
2012/12/02 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python中__slots__用法实例
2015/06/04 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
jupyter实现重新加载模块
2020/04/16 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
2014年人事专员工作总结
2014/11/19 职场文书
财政局个人总结
2015/03/04 职场文书
针对吵架老公保证书
2015/05/08 职场文书
被告代理词范文
2015/05/25 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python re.sub 反向引用的实现
2021/07/07 Python