JAVA学习代码——短信验证码倒计时功能

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

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

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

[html]  view plain  copy

 print ?

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

js对cookie的操作

[html]  view plain  copy

 print ?

1. //发送验证码时添加cookie  
2. function addCookie(name,value,expiresHours){   
3.     var cookieString=name+"="+escape(value);   
4.     //判断是否设置过期时间,0代表关闭浏览器时失效  
5.     if(expiresHours>0){   
6.         var date=new Date();   
7.         date.setTime(date.getTime()+expiresHours*1000);   
8.         cookieString=cookieString+";expires=" + date.toUTCString();   
9.     }   
10.         document.cookie=cookieString;   
11. }   
12. //修改cookie的值  
13. function editCookie(name,value,expiresHours){   
14.     var cookieString=name+"="+escape(value);   
15.     if(expiresHours>0){   
16.       var date=new Date();   
17.       date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒  
18.       cookieString=cookieString+";expires=" + date.toGMTString();   
19.     }   
20.       document.cookie=cookieString;   
21. }   
22. //根据名字获取cookie的值  
23. function getCookieValue(name){   
24.       var strCookie=document.cookie;   
25.       var arrCookie=strCookie.split("; ");   
26.       for(var i=0;i<arrCookie.length;i++){   
27.         var arr=arrCookie[i].split("=");   
28.         if(arr[0]==name){  
29.           return unescape(arr[1]);  
30.           break;  
31.         }else{  
32.              return "";   
33.              break;  
34.          }   
35.       }   
36.          
37. }  

主要逻辑代码

[html]  view plain  copy

 print ?

1. $(function(){  
2.     $("#second").click(function (){  
3.         sendCode($("#second"));  
4.     });  
5.     v = getCookieValue("secondsremained");//获取cookie值  
6.     if(v>0){  
7.         settime($("#second"));//开始倒计时  
8.     }  
9. })  
10. //发送验证码  
11. function sendCode(obj){  
12.     var phonenum = $("#phonenum").val();  
13.     var result = isPhoneNum();  
14.     if(result){  
15.         doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});  
16.         addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s  
17.         settime(obj);//开始倒计时  
18.     }  
19. }  
20. //将手机利用ajax提交到后台的发短信接口  
21. function doPostBack(url,backFunc,queryParam) {  
22.     $.ajax({  
23.         async : false,  
24.         cache : false,  
25.         type : 'POST',  
26.         url : url,// 请求的action路径  
27.         data:queryParam,  
28.         error : function() {// 请求失败处理函数  
29.         },  
30.         success : backFunc  
31.     });  
32. }  
33. function backFunc1(data){  
34.     var d = $.parseJSON(data);  
35.     if(!d.success){  
36.         alert(d.msg);  
37.     }else{//返回验证码  
38.         alert("模拟验证码:"+d.msg);  
39.         $("#code").val(d.msg);  
40.     }  
41. }  
42. //开始倒计时  
43. var countdown;  
44. function settime(obj) {   
45.     countdown=getCookieValue("secondsremained");  
46.     if (countdown == 0) {   
47.         obj.removeAttr("disabled");      
48.         obj.val("免费获取验证码");   
49.         return;  
50.     } else {   
51.         obj.attr("disabled", true);   
52.         obj.val("重新发送(" + countdown + ")");   
53.         countdown--;  
54.         editCookie("secondsremained",countdown,countdown+1);  
55.     }   
56.     setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次  
57. }   
58. //校验手机号是否合法  
59. function isPhoneNum(){  
60.     var phonenum = $("#phonenum").val();  
61.     var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;   
62.     if(!myreg.test(phonenum)){   
63.         alert('请输入有效的手机号码！');   
64.         return false;   
65.     }else{  
66.         return true;  
67.     }  
68. }