效果實現圖 ...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #btnyzm { background: #31BCFF; color: #fff; font-size: 14px; padding: 0; line-height: 43px; border-radius: 0; border: 0; width: 50%; } .btn_com:disabled { background-color: #999999 !important; } </style> </head> <body> <input type="button" class="btn_com" id="btnyzm" value="發送驗證碼"> <script type="text/javascript"> var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="發送驗證碼"; wait = 60; } else { o.setAttribute("disabled", true); o.value="(" + wait + ")後可重新發送"; wait--; setTimeout(function() { time(o) }, 1000) } } document.getElementById("btnyzm").onclick=function(){time(this);} </script> </body> </html>
效果實現圖
