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 相关文章推荐
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
用PHP调用数据库的存贮过程!
2006/10/09 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
Python迭代用法实例教程
2014/09/08 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python3.7 的新特性详解
2019/07/25 Python
python类中super() 的使用解析
2019/12/19 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
医院实习接收函
2014/01/12 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
九九重阳节标语
2014/10/07 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS