位置:首页 > 程序设计 > js实现发送验证码后的倒计时功能

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

时间:2017-02-16  |  作者:网络  |  阅读:112

之前分享过只用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;

}

}

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

 

福利游戏

相关文章

更多

精选合集

更多

大家都在玩

热门话题

大家都在看

更多