微信小程序 - 倒计时60秒(获取验证码)

最新推荐文章于 2024-08-09 10:26:02 发布

原创

最新推荐文章于 2024-08-09 10:26:02 发布 · 698 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #发送验证码

文章描述了一个微信小程序中实现发送验证码功能的代码示例，使用button标签并利用disabled属性控制发送按钮在倒计时期间的禁用状态。通过设置计时器实现60秒倒计时，期间按钮变为灰色并显示剩余时间，倒计时结束后恢复可点击状态。

实现效果

为了观看效果先行设置为10s，正常一般都是60s

在这里插入图片描述

功能版

wxml
这里我没有采用view、text等标签，而是采用了button，主要原因是用到了disabled的属性，作用于发送验证码后事件失效，倒计时完毕之后事件继续生效；

所遇问题：因为前期使用view、text标签没有找到类型disabled的属性，所以在发送验证码后依旧可以进行点击，从而导致开启多个计时器，计时速度加快、计时器覆盖
```
//点击属性：sendCode  点击状态：smsFlag  字体颜色：sendColor  显示文字：sendTime
<button bindtap="sendCode" disabled="{
    
    {smsFlag}}" style='margin-top:50px;
margin-right:10rpx;color:{
    
    {sendColor}};font-size:28rpx'>{
    
    {sendTime}}</button>
```
js

注意： wxml中声明的smsFlag 代表 disabled的状态；disabled： true代表不可点击；false代表可点击(这点对于我而言有点别扭 - - ！)

Page({

  data: {
   	//设置初始的状态、包含字体、颜色、还有等待事件 > <
    sendTime: '获取验证码',
    sendColor: '#363636',
    snsMsgWait: 60
  },

 // 获取验证码
  sendCode: function() {  
 // 60秒后重新获取验证码
    var inter = setInterval(function() {
      this.setData({
        smsFlag: true,
        sendColor: '#cccccc',
        sendTime: this.data.snsMsgWait + 's后重发',
        snsMsgWait: this.data.snsMsgWait - 1
      });
      if (this.data.snsMsgWait < 0) {
        clearInterval(inter