微信小程序实现点击发送验证码倒计时

很简单,这里就不做过多的解释了

先来咔咔效果吧

我先来说说,实现流程:

1, 验证码过期时间为60秒

2: 点击获取验证码开始倒计时

3, 倒计时为0时,重新获取验证码

提交这里就不多说了,看项目需求

看看代码吧

wxml

<wxs module="tools" src="../../../sub/subutil.wxs"></wxs>
<view class="modification-phone">
  <view class="shu">请输入验证码</view>
  <view class="phone">输入{{tools.sub(phone, 3, 4)}}收到的验证码</view>


  <view class="verification-code">
    <view>
      <image src="http://ico.dongtiyan.com/tu-31.png"></image>
      <input placeholder="请输入验证码" value="" placeholder-class="color: #999999;"></input>
    </view>
    <block wx:if="{{countDownNum==60 || countDownNum==-1}}">
      <view bindtap="countDown">获取验证码</view>
    </block>
    <block wx:else>
      <view>{{countDownNum}}s后重新发送</view>
    </block>
  </view>

  <view class="submit" bindtap="chooseSubmit">提交</view>
</view>

如果感兴趣<wxs module="tools" src="../../../sub/subutil.wxs"></wxs>怎么来的,那就看看我的另一篇博客吧

微信小程序使用wxs实现手机号用****代替(超详细)_青衫折扇的博客-CSDN博客

wxss

.modification-phone {
  background: #FFFFFF;
  height: 100%;
  padding: 0 76rpx;
}
.shu {
  font-size: 28rpx;
  color: #000000;
  font-weight: 600;
  padding: 79rpx 0 24rpx;
}
.phone {
  font-size: 24rpx;
  font-weight: 400;
  margin-bottom: 70rpx;
}
.verification-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #F73A3F;
  background: #EEEEEE;
  border-radius: 44rpx;
  padding: 15rpx 38rpx;
}
.verification-code view:nth-child(1) {
  display: flex;
  align-items: center;
}
.verification-code view:nth-child(1) input {
  width: 260rpx;
}
.verification-code view:nth-child(1) image {
  width: 26rpx;
  height: 28rpx;
  margin-right: 18rpx;
}

.submit {
  height: 88rpx;
  margin: 110rpx 0 0;
  text-align: center;
  line-height: 88rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  background: #F73A3F;
  border-radius: 44rpx;
}

核心js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: "13083780851",
    timer: "",            // 定时器名字
    countDownNum: '60', // 倒计时初始值
  },
  /**
   * 验证码倒计时
   */
  countDown: function() {
    var _this = this;
    var countDownNum = _this.data.countDownNum;             // 获取倒计时初始值
    var timer = setInterval(function() {
      countDownNum -= 1;
      _this.setData({
        countDownNum: countDownNum
      })
      if(countDownNum <= -1) {
        clearInterval(timer);
        // 取消置顶的setInterval函数将要执行的代码
        _this.setData({
          countDownNum: 60,
        })
      }
    }, 1000)
  },
})

以上就是所有代码了