js实现发送短信验证码后的倒计时功能(无视页面刷新)

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

[代码]这是页面上的发送验证码按钮    

?

1

<inputid="second"type="button" value="免费获取验证码" />

2. [代码]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){

    varcookieString=name+"="+escape(value);

    //判断是否设置过期时间,0代表关闭浏览器时失效

    if(expiresHours>0){

        vardate=newDate();

        date.setTime(date.getTime()+expiresHours*1000);

        cookieString=cookieString+";expires="+ date.toUTCString();

    }

        document.cookie=cookieString;

}

//修改cookie的值

function editCookie(name,value,expiresHours){

    varcookieString=name+"="+escape(value);

    if(expiresHours>0){

      vardate=newDate();

      date.setTime(date.getTime()+expiresHours*1000);//单位是毫秒

      cookieString=cookieString+";expires="+ date.toGMTString();

    }

      document.cookie=cookieString;

}

//根据名字获取cookie的值

function getCookieValue(name){

      varstrCookie=document.cookie;

      vararrCookie=strCookie.split("; ");

      for(vari=0;i<arrCookie.length;i++){

        vararr=arrCookie[i].split("=");

        if(arr[0]==name){

          returnunescape(arr[1]);

          break;

        }else{

             return"";

             break;

         }

      }

       

}

3. [代码]主要逻辑代码    

?

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){

    varphonenum = $("#phonenum").val();

    varresult = 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){

    vard = $.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(){

    varphonenum = $("#phonenum").val();

    varmyreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

    if(!myreg.test(phonenum)){

        alert('请输入有效的手机号码！');

        returnfalse;

    }else{

        returntrue;

    }

}

有点小bug.

主要逻辑代码，5行 改成 ，  v = getCookieValue("secondsremained")？

getCookieValue("secondsremained")：0

;//获取cookie值

去掉下面的。

else{
             return ""; 
             break;
         }