驗證碼重新發送倒計時
阿新 • • 發佈：2018-11-10
驗證碼重新發送倒計時
1、效果
2、程式碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>驗證碼重新發送倒計時</title> <style> .text{ border: 1px solid #cccccc; border-radius: 10px; height: 42px; line-height: 40px; outline: none; padding: 0 15px; } .button{ border-radius: 10px; height: 42px; line-height: 40px; padding: 0 10px; outline: none; width: 100px; background: #4C8BF5; border: 0; color: #FFFFFF; font-size: 15px; right: 0; top: 0; } </style> </head> <body> <input type="text" class="text" placeholder="請輸入驗證碼"> <input type="button" class="button" onclick="settime(this)" value="傳送驗證碼"> </body> <script type="text/javascript"> var countdown=6; function settime(obj) { if (countdown == 0) { obj.style.backgroundColor='#4C8BF5'; obj.removeAttribute("disabled"); obj.value="獲取驗證碼"; countdown = 10; return; } else { obj.style.backgroundColor='#575757'; //$(obj).css("background","#575757"); obj.setAttribute("disabled", true); obj.value="重新發送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) } ,1000); } </script> </html>