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

嫣嫣细语

于 2023-07-18 13:45:55 发布

阅读量654

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序发送验证码

本文链接：https://blog.youkuaiyun.com/aaa123aaasqw/article/details/131785488

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

为了观看效果先行设置为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

最低0.47元/天解锁文章