微信小程序实现获取验证码60S倒计时（学习微信小程序第n天）！

最新推荐文章于 2026-06-04 10:15:00 发布

原创最新推荐文章于 2026-06-04 10:15:00 发布 · 539 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #js

收录于

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

互联网

12 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现获取验证码后的60秒倒计时功能，分别从wxml页面布局和login.js逻辑处理两方面进行讲解。

1.wxml页面

    <text class='key_code' wx:if="{{is_showCode}}" bindtap='getCode'>获取验证码</text>
        <text wx:else class='key_code'>{{minutes}}s后重新发送</text>
        </view>
        <view class='login_tr'>
        <input type="number" placeholder="请输入验证码" maxlength="6" class='ipt' 
        placeholder-class='placeholders' name="userPassword" bindinput='get_code'/>
        </view>
        <view>
          <i-button type="info" bindtap='loginTab'>登录</i-button>
        </view>

2.login.js页面

    //初始化数据
    data: {
        is_showCode: true, //判断有没有点击获取验证码
        minutes: "60", //获取验证码的毫秒数
      },
	
     // 获取验证码倒计时
      getCode: function (event) {
        var that = this
        var count = 59;  
        that.setData({
          is_showCode: false   //显示倒计时的span
        })
        var timer = setInterval(function () {
          if (count >= 0) {
            that.setData({
              minutes: count
            })
          } else {
            clearInterval(timer);
            that.setData({ is_showCode: true })
          }
          count--
        }, 1000)