JS 實現傳送驗證碼效果
阿新 • • 發佈：2020-09-17
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button { height: 50px; font-size: 18px; line-height: 50px; color: #fff; background: red; } </style> </head> <body> <button>傳送驗證碼</button> <script> //1.獲取元素 var btn = document.getElementsByTagName("button")[0]; //4.宣告一個狀態變數 記錄按鈕的狀態var flag = "active"; //2.新增點選事件 btn.onclick = function(){ //將倒計時的變數 宣告在點選事件中 這樣每次點選之後 就可以將變數的值重置 var n = 10; //3.按鈕存在兩種狀態 啟用態 禁用態 //如果是啟用態 if(flag == "active"){ //讓按鈕 背景變灰， 內容換成 已傳送(ns後重新發送) btn.style.background= "gray"; btn.innerHTML = "已傳送("+n+"s後重新發送)"; //修改狀態 flag = "disabled"; //設定間歇定時器 進行倒計時 var timer = setInterval(function(){ n--; if(n<0){ clearInterval(timer); //將 內容 重新改回 傳送驗證碼 btn.innerHTML = "傳送驗證碼"; btn.style.cssText = "";//幹掉行內樣式 重新使用 非行內樣式 //改回來 狀態 flag = "active"; //阻斷函式的執行 return false; } btn.innerHTML = "已傳送("+n+"s後重新發送)"; },1000) } else{//如果是禁用態 return false; } } </script> </body> </html>