JavaScript案例:簡訊驗證碼倒計時
阿新 • • 發佈:2022-05-06
展示效果:
程式碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡訊驗證碼倒計時</title> </head> <body> <input type="text"> <button>傳送</button> <script> var btn = document.getElementsByTagName("button")[0]; // 剩餘的秒數 var time = 20; btn.onclick = function () { // 按鈕變灰色,並且無法點選 btn.disabled = true; // 倒計時 var timer = setInterval(function () { if (time==0){ // 清除定時器 clearInterval(timer); btn.disabled = false; btn.innerText = "傳送"; time = 20; }else { btn.innerText = "還剩下" + time + "秒"; time--; } },1000) } </script> </body> </html>