注册、登录、找回密码都常见填手机号点获取按钮变成「重新发送(60)」一路往下减减完才能再点。本例一共数 60 秒跟常见短信间隔一致想本地快点看完效果可以把下面的 COUNT_DURATION 临时改成 5。手机号框和获取按钮如何对应哪个是手机号、哪个是获取按钮靠元素上的 id 对应。本例手机号框是 PhoneNum获取按钮是 YzmBtn验证码框是 CodeNum只用于填写短信数字不参与倒计时。页面上改了 idsmsCode.js 里要一并改掉否则点击无效。引入顺序先 jQuery再 Layui最后 smsCode.js。顺序反了提示和点击会异常。外观在 css/smsCode.css 里调整。获取按钮等待中的样式怎么写需要分清两种外观可点击时深蓝底、黄字、手型光标等待倒计时时略透明、禁止光标文案改为「重新发送(n)」。宽高不要写死用 padding: 10px 16px 撑开文案变长也不易变形。输入框边框、间距按设计修改。等待态用浏览器自带的禁用状态即可不必另做一套灰按钮类名来回切换避免漏加类名后仍显示为可点。手机号填错时如何提示点击获取前先检查号码格式空号或位数不对就停止。规则1 开头第二位 39再跟 9 位数字写作 /^1[3-9]\d{9}$/。取值前去掉首尾空格。格式不对时用 layer.msg 提示「手机号码有误请重填」文案按项目约定。这坑我见过不止一次号段规则过旧新号段会被误判需与产品确认后再改。获取验证码后的倒计时怎么做流程可以概括成三步先禁用按钮文案改为「重新发送(秒数)」每秒减 1减到 0 后恢复「获取验证码」并可再次点击。COUNT_DURATION 为总秒数countDown 为剩余秒数。timer 保存本次倒计时必须保留否则中途无法清除按钮会一直处于禁用。若已在倒计时中则直接返回避免重复启动导致秒数错乱。按钮禁用后连续点击无效。使用 setTimeout 逐秒调度结束时便于清除。点击时这样接入接入发送短信时如何修改号码校验通过后先请求发送短信成功后再开始倒计时。发送失败时保持按钮可点便于立即重试避免一点击就禁用导致无法操作。请求地址、成功失败判断按项目约定替换。若还需图形验证码防刷将结果一并提交。总秒数只改 COUNT_DURATION倒计时相关函数一般无需改动。
注册、登录、找回密码都常见填手机号点获取按钮变成「重新发送(60)」一路往下减减完才能再点。本例一共数 60 秒跟常见短信间隔一致想本地快点看完效果可以把下面的 COUNT_DURATION 临时改成 5。手机号框和获取按钮如何对应哪个是手机号、哪个是获取按钮靠元素上的 id 对应。本例手机号框是 PhoneNum获取按钮是 YzmBtn验证码框是 CodeNum只用于填写短信数字不参与倒计时。页面上改了 idsmsCode.js 里要一并改掉否则点击无效。引入顺序先 jQuery再 Layui最后 smsCode.js。顺序反了提示和点击会异常。外观在 css/smsCode.css 里调整。获取按钮等待中的样式怎么写需要分清两种外观可点击时深蓝底、黄字、手型光标等待倒计时时略透明、禁止光标文案改为「重新发送(n)」。宽高不要写死用 padding: 10px 16px 撑开文案变长也不易变形。输入框边框、间距按设计修改。等待态用浏览器自带的禁用状态即可不必另做一套灰按钮类名来回切换避免漏加类名后仍显示为可点。手机号填错时如何提示点击获取前先检查号码格式空号或位数不对就停止。规则1 开头第二位 39再跟 9 位数字写作 /^1[3-9]\d{9}$/。取值前去掉首尾空格。格式不对时用 layer.msg 提示「手机号码有误请重填」文案按项目约定。这坑我见过不止一次号段规则过旧新号段会被误判需与产品确认后再改。获取验证码后的倒计时怎么做流程可以概括成三步先禁用按钮文案改为「重新发送(秒数)」每秒减 1减到 0 后恢复「获取验证码」并可再次点击。COUNT_DURATION 为总秒数countDown 为剩余秒数。timer 保存本次倒计时必须保留否则中途无法清除按钮会一直处于禁用。若已在倒计时中则直接返回避免重复启动导致秒数错乱。按钮禁用后连续点击无效。使用 setTimeout 逐秒调度结束时便于清除。点击时这样接入接入发送短信时如何修改号码校验通过后先请求发送短信成功后再开始倒计时。发送失败时保持按钮可点便于立即重试避免一点击就禁用导致无法操作。请求地址、成功失败判断按项目约定替换。若还需图形验证码防刷将结果一并提交。总秒数只改 COUNT_DURATION倒计时相关函数一般无需改动。
