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

╰+哭是因爲堅強的太久メ 2023-02-21 04:52 2阅读 0赞

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

先来咔咔效果吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

我先来说说,实现流程:

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博客][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)
      },
    })

以上就是所有代码了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628165316989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[wxs_-CSDN]: https://blog.csdn.net/qq_42543264/article/details/106998682