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

页面导航:首页 > 网络编程 > JavaScript > js实现发送验证码后的倒计时功能

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

来源:互联网 作者:脚本宝典 时间:2015-06-01 14:01 【

本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口,就可以了

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用

特别说明:

     cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的.

html代码

?
1
<input id="second" type="button" value="免费获取验证码" />

js对cookie的操作 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//发送验证码时添加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;
     }
   }
    
}

主要逻辑代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(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;
  }
}

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

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<