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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
JavaScript callback回调函数用法实例分析
May 08 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python树的同构学习笔记
2019/09/14 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
Delphi笔试题
2016/11/14 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
最热门的自我评价
2013/12/30 职场文书
《自选商场》教学反思
2014/02/14 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
员工辞职信怎么写
2015/02/27 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL