微信小程序实现点击获取验证码倒计时结束可再点击功能
2023-02-18 16:30:15 时间
效果图
js
Page({
data: {
//点击前的文本内容
text: '发送验证码',
//控制按钮能否点击
disabled: false,
//倒计时时间
time: 60,
//定时器
timer: ''
},
//点击方法
send: function() {
//将按钮设置为禁用
this.setData({
disabled: true
})
//给定时器赋值
this.data.timer = setInterval(() => {
this.timer()
}, 1000)
//弹出提示框
wx.showToast({
title: '发送成功',
duration: 2000
})
},
//定时器
timer() {
let time = this.data.time;
time--;
this.setData({
time,
text: time + '秒后可重新获取'
})
//判断倒计时时间为0时
if(time <= 0) {
//清除定时器
clearInterval(this.data.timer);
//设置文本内容,倒计时间,按钮可用
this.setData({
text: '发送验证码',
time: 60,
disabled: false
})
}
}
})
相关文章
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- Java疫苗预约小程序线上疫苗预约系统
- 移动研发提效?小程序容器技术来帮忙!
- 微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题
- 微信小程序(二)学妹问我微信小程序左滑删除怎么实现
- 微信小程序(三)实现类似Vue中的 computed,watch 功能
- 微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
- 一文说透小程序插件及其作用价值
- android learning
- 微信小程序HTTPS - cenos apache 下安装SSL证书
- 3小时!开发ChatGPT微信小程序
- iOS 裁包大作战 —— JOOX Music 如何瘦身40MB
- 只需4步!带你成功将小程序转为APP
- 设计师应该了解的iOS应用开发基础知识
- 小程序容器技术成为组装式应用基础
- 「Native+小程序」,App热更新技术最优解
- 混合式App开发背景下,「Native+小程序」成为最优解
- 不改一行代码,就可以将微信小程序转成商业App?
- 技术分享|如何运用FinClip轻松将微信小程序转成商业App
- R8在Android手Q中的应用