注冊、登錄、找回密碼都常見填手機號點獲取按鈕變成「重新發(fā)送(60)」一路往下減減完才能再點。本例一共數 60 秒跟常見短信間隔一致想本地快點看完效果可以把下面的 COUNT_DURATION 臨時改成 5。手機號框和獲取按鈕如何對應哪個是手機號、哪個是獲取按鈕靠元素上的 id 對應。本例手機號框是 PhoneNum獲取按鈕是 YzmBtn驗證碼框是 CodeNum只用于填寫短信數字不參與倒計時。頁面上改了 idsmsCode.js 里要一并改掉否則點擊無效。引入順序先 jQuery再 Layui最后 smsCode.js。順序反了提示和點擊會異常。外觀在 css/smsCode.css 里調整。獲取按鈕等待中的樣式怎么寫需要分清兩種外觀可點擊時深藍底、黃字、手型光標等待倒計時時略透明、禁止光標文案改為「重新發(fā)送(n)」。寬高不要寫死用 padding: 10px 16px 撐開文案變長也不易變形。輸入框邊框、間距按設計修改。等待態(tài)用瀏覽器自帶的禁用狀態(tài)即可不必另做一套灰按鈕類名來回切換避免漏加類名后仍顯示為可點。手機號填錯時如何提示點擊獲取前先檢查號碼格式空號或位數不對就停止。規(guī)則1 開頭第二位 39再跟 9 位數字寫作 /^1[3-9]\d{9}$/。取值前去掉首尾空格。格式不對時用 layer.msg 提示「手機號碼有誤請重填」文案按項目約定。這坑我見過不止一次號段規(guī)則過舊新號段會被誤判需與產品確認后再改。獲取驗證碼后的倒計時怎么做流程可以概括成三步先禁用按鈕文案改為「重新發(fā)送(秒數)」每秒減 1減到 0 后恢復「獲取驗證碼」并可再次點擊。COUNT_DURATION 為總秒數countDown 為剩余秒數。timer 保存本次倒計時必須保留否則中途無法清除按鈕會一直處于禁用。若已在倒計時中則直接返回避免重復啟動導致秒數錯亂。按鈕禁用后連續(xù)點擊無效。使用 setTimeout 逐秒調度結束時便于清除。點擊時這樣接入接入發(fā)送短信時如何修改號碼校驗通過后先請求發(fā)送短信成功后再開始倒計時。發(fā)送失敗時保持按鈕可點便于立即重試避免一點擊就禁用導致無法操作。請求地址、成功失敗判斷按項目約定替換。若還需圖形驗證碼防刷將結果一并提交?？偯霐抵桓?COUNT_DURATION倒計時相關函數一般無需改動。