前端实现手机短信验证码倒计时效果
2023-12-13 03:43:53
实现效果:实现按钮倒计时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)
}
文章来源:https://blog.csdn.net/weixin_46042206/article/details/134833472
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!