当前位置：首页 > news >正文

微信小程序---验证码倒计时

news 来源：原创 2024/5/6 23:33:29

实现效果

微信小程序如何实现获取验证码后倒计时效果？

完整代码

wxml


<view class="password">
    <view class="header">
        <view>为了您的账户安全，需要验证您的手机</view>
        <view class="phone">186****4215 </view>
    </view>
    <view class="input">
        <input class="num" type="number" placeholder="输入验证码" bindinput="change" data-key="code" value="{{code}}"></input>
        <button class='btn' disabled='{{disabled}}' bindtap="getVerificationCode">{{time}}</button>
    </view>
    <view class="input">
        <input type="number" placeholder="输入新的密码" bindinput="change" data-key="password" value="{{password}}"></input>
    </view>
    <button class="button">确认</button>
</view>

wxss

/* pages/my/info/password/password.wxss */
.password {
    height: 100vh;
    background: #F4F6F7;
    padding-top: 52rpx;
    box-sizing: border-box;
}

.header {
    text-align: center;

}

.phone {
    margin-top: 22rpx;
    margin-bottom: 40rpx;
}

.input {
    width: 686rpx;
    height: 102rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 32rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
}

.input .btn {

    height: 62rpx;
    margin-left: 25rpx;
    text-align: center;
    line-height: 30rpx;
    color: #00B652;
    background-color: #fff;
}

.button {
    width: 686rpx !important;
    height: 108rpx;
    background: #00B652;
    border-radius: 8rpx;
    line-height: 70rpx;
    color: #fff;
    margin-top: 56rpx;

}

.num {
    border-right: 1rpx solid #979797;
}

Page({

  data: {
    time: '获取验证码', //倒计时 
    currentTime: 60
  },

  onLoad(options) {

  },
  getCode: function () {
    var that = this;
    var currentTime = that.data.currentTime
    let interval = null
    interval = setInterval(function () {
      currentTime--;
      that.setData({
        time: currentTime + '秒'
      })
      if (currentTime <= 0) {
        clearInterval(interval)
        that.setData({
          time: '重新发送',
          currentTime: 60,
          disabled: false
        })
      }
    }, 1000)

  },

  getVerificationCode() {
    this.getCode();
    var that = this
    that.setData({
      disabled: true
    })
  },
})