小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序怎么实现验证码倒计时功能

微信小程序怎么实现验证码倒计时功能

要实现微信小程序中的验证码倒计时功能,可以借助定时器(`setInterval`)来实现计时功能,

并在计时过程中禁用获取验证码的按钮。下面是一个简单的示例代码:


1. 在小程序的页面中,添加一个按钮用于获取验证码:

{{countDown}}



2. 在页面的 js 文件中,编写计时逻辑:

Page({
  data: {
    countDown: 60,         // 初始倒计时秒数
    disabled: false       // 验证码按钮是否禁用
  },
  
  // 点击获取验证码按钮
  getCode: function() {
    const that = this;

    // 倒计时开始,禁用按钮
    that.setData({
      disabled: true
    });

    let count = that.data.countDown;

    const timer = setInterval(function() {
      if (count > 0) {
        count -= 1;
        that.setData({
          countDown: count
        });
      } else {
        // 倒计时结束,启用按钮
        clearInterval(timer);
        that.setData({
          countDown: 60,
          disabled: false
        });
      }
    }, 1000);
  }
});


在上述示例中,点击获取验证码按钮后,倒计时开始,

按钮将被禁用。使用 `setInterval` 开启定时器,每秒减少倒计时秒数 `count`,并将新的倒计时秒数更新到界面上。

当倒计时结束后,清除定时器,重新启用按钮,恢复初始倒计时秒数。

这样,当用户点击获取验证码按钮后,将启动倒计时,并在倒计时过程中禁用按钮,提供用户友好的验证码倒计时体验。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了