验证码倒计时
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>