首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

微信小程序登录与注册验证码倒计时的效果实现

我们在做手机登录和用户注册时,总会用到倒计时效果,今天就来给大家讲讲手机登录时验证码倒计时效果的实现。 老规矩,先看效果图 ?...可以看到,我们在点击获取验证码以后,就开始倒计时了,正常都是从60s倒计时的,这里为了演示方便,我从6s开始的。可以看到倒计时结束后,按钮又恢复了可以点击的状态。 一,index.wxml布局 ?...js事件。...三,index.js实现倒计时效果 1,首先看下倒计时实现的部分。 ? 上图红框里是我们实现倒计时的核心代码,可以看到我们主要是用了setInterval 这个方法来实现每个1s的计时器。...,用户不能再次点击获取验证码的按钮,获取点击时要给用户提示。

2K50

微信小程序----短信验证码倒计时插件

效果图 JS // 倒计时插件 class CountTime { constructor(page) { this.page = page; this.time = 60;.../utils/countTime.js"); 2.在 onLoad 周期初始化 this.time = new CountTime(this); 3.在点击获取二维码按钮中使用 // 调用验证码获取倒计时方法...else { this.wetoast.toast({ title: res.data.message }); } } }) }, // 调用验证码获取倒计时方法...; } } }) 注意 在进行倒计时前需要对手机号进行判断,验证手机号码是否正确的正则。 判断 flag 的值,防止多次点击,进行多次求情。 执行倒计时后在执行获取二维码请求的函数。...优化 按钮文字、倒计时时间、可以进行自定义使用传入值。 将倒计时不能多次点击的判断放入插件内部,调用插件直接倒计时

1.1K20
领券