特別說明:
     cookie最初建立的有效時間是60秒.也就是說,你如果在倒計時為20的時候,關閉網頁.20秒之後再開啟,是不會有倒計時顯示的;但是,如果倒計時為20時,關閉頁面,如果在20秒內重新開啟頁面,是有倒計時顯示的.

這是頁面上的傳送驗證碼按鈕 

1. <inputid="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. }  

主要邏輯程式碼

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