前端实现手机短信验证码倒计时效果

本文主要是介绍前端实现手机短信验证码倒计时效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现效果：实现按钮倒计时10s后可重新发送验证码

一、思路
1、禁用按钮，调用后端接口，获取验证码
2、setTimeOut(() => {},1000)延迟1s执行，time - 1，返回文案，9s
3、迭代处理，调用自身函数，time - 1，返回文案，8s，实现9s 8s 7s 这样倒计时的效果。
4、不能无限迭代减1，判断时间为最后一秒时，解除按钮禁用状态

二、代码

    sendVerifyCode() {this.verifyCodeDisable = true;// 调用后端接口获取验证码this.getVerifyCode()// 初始化倒计时时间let time = 10;this.setTime(time)},setTime(time) {setTimeout(() => {if (time > 1) {time--;// 返回文案this.tips = time + 's';// 迭代调用this.setTime(time)} else {// 倒计时最后一秒，解除禁用状态，可重新发送验证码this.verifyCodeDisable = false;this.tips = '获取验证码';}}, 1000)}

这篇关于前端实现手机短信验证码倒计时效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---