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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
js实现盒子移动动画效果
Aug 09 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
值得收藏的10道python 面试题
2019/04/15 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
智能钱包:Ekster
2019/11/21 全球购物
季度思想汇报
2014/01/01 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
施工安全标语
2014/06/07 职场文书
走进敬老院活动总结
2014/07/10 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs