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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php Smarty 字符比较代码
2011/02/27 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
小程序实现搜索框
2020/06/19 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
最新pycharm安装教程
2020/11/18 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
挂职思想汇报
2013/12/31 职场文书
股份转让协议书
2014/04/12 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
英文演讲稿开场白
2014/08/25 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
具结保证书
2015/01/17 职场文书
高三英语教学反思
2016/03/03 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python