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