微信小程序获取验证码30s倒计时

页面效果 

 

wxml页面代码

<view class='verificationCode'>
  <view class='verificationText'>验证码</view>
  <input class="userName" type="number" placeholder="请输入短信验证码" class='verificationInput'/>
  <view class='getVerification' bindtap="getVerification" wx:if='{{!verificationCodeButton}}'>{{verificationText}}</view>
  <view class='getVerifications' wx:if='{{verificationCodeButton}}'>已发送{{count}}s</view>
</view>

 css页面代码

.verificationCode {
  height: 126rpx;
  width: 686rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: row;
  margin-top: 32rpx;
  align-items: center;
}
.verificationText {
  padding: 0 40rpx;
}
.getVerification,
.getVerifications {
  padding: 24rpx;
  border-radius: 16rpx;
  background: #0099FF;
  margin-right: 24rpx;
  font-size: 24rpx;
  color: #FFFFFF;
}
.getVerifications {
  background: #9ED4F9;
}
.verificationInput {
  flex: 1;
}

 js页面代码

Page({
  data: {
    verificationCode: null,
    count: 30,
    verificationText: '获取验证码',
  },

  /**
  * 30s倒计时
  */
  countDown() {
    const that = this;
    const { count } = that.data;
    if (count == 0) {
      that.setData({
        count: 60,
        verificationCodeButton: false,
        verificationText: '重新发送'
      });
      clearTimeout(time);
      return;
    }
    const time = setTimeout(function () {
      that.setData({
        count: count - 1,
      });
      that.countDown();
    }, 1000);
  },
})