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

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

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

特别说明:

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

html代码

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

js对cookie的操作

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. } 

主要逻辑代码

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. } 

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