验证码倒计时

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title>验证码倒计时</title>
 4     <script src="http://code.jquery.com/jquery-latest.js"></script>
 5     <style>
 6         .zc_submit {
 7             height: 35px;
 8             line-height: 35px;
 9             background: #AA0000;
10             display: block;
11             width: 152;
12             color: #FFFFFF;
13             font-size: 0.8em;
14             text-align: center;
15             box-shadow: inset 0 0 1px #AA0000;
16             border: 0px solid #AA0000;
17             box-sizing: border-box;
18         }
19     </style>
20     <script type="text/javascript">
21         var wait = 5;
22         function SendCode() {
23             if (wait == 5) { time(); GetSmsCode(); }
24             else { };
25         }
26         function time() {
27             var $ALink = $("#Getcode");
28             if (wait == 0) {
29                 $ALink.css('background-color', '#AA0000');
30                 document.getElementById("Getcode").innerHTML = "获取验证码：";
31                 $ALink.click(function () {
32                     SendCode();
33                 });
34                 wait = 5;
35             } else {
36                 $ALink.css('background-color', '#666666');
37                 document.getElementById("Getcode").innerHTML = wait + "秒后重新获取";
38                 wait--;
39                 setTimeout(function () {
40                     document.getElementById("Getcode").onclick = function () {
41                         return false;
42                     }
43                     time();
44                 },
45                 1000)
46             }
47         }
48     </script>
49 
50 </head>
51 <body>
52     <a class="zc_submit" herf="#" id="Getcode" onclick="SendCode();" style="152px">获取验证码：</a>
53     <input name="code" id="code" type="text" placeholder="短信发送可能因运营商网络会延迟3-5分钟">
54 </body>
55 </html>
View Code