本文解決方案的基本思路是點擊就將按鈕設為disabled,然后根據(jù)cookie判斷是否設置過期時間,將手機利用ajax提交到后臺的發(fā)短信接口，就可以了

之前分享過只用js實現(xiàn)倒計時的功能,后來測試時發(fā)現(xiàn),刷新或關閉網(wǎng)頁后,倒計時就不能用了.網(wǎng)上也沒找到合適的解決方案,所以自己就寫了個,這次的算是優(yōu)化版吧,能滿足刷新或重新打開網(wǎng)頁后,倒計時依然能用

特別說明:

cookie最初創(chuàng)建的有效時間是60秒.也就是說,你如果在倒計時為20的時候,關閉網(wǎng)頁.20秒之后再打開,是不會有倒計時顯示的;但是,如果倒計時為20時,關閉頁面,如果在20秒內重新打開頁面,是有倒計時顯示的.

html代碼

1. <input id="second" type="button" value="免費獲取驗證碼" /> 

js對cookie的操作

1. //發(fā)送驗證碼時添加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. //根據(jù)名字獲取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. //發(fā)送驗證碼 
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提交到后臺的發(fā)短信接口 
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() {// 請求失敗處理函數(shù) 
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("重新發(fā)送(" + countdown + ")");  
53. countdown--; 
54. editCookie("secondsremained",countdown,countdown+1); 
55. }  
56. setTimeout(function() { settime(obj) },1000) //每1000毫秒執(zhí)行一次 
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. } 

以上所述就是本文的全部內容了，希望大家能夠喜歡。