微信小程序登录与注册验证码倒计时的效果实现

编程小石头

发布于 2020-10-22 14:54:41

2K0

发布于 2020-10-22 14:54:41

文章被收录于专栏：小程序云开发入门

我们在做手机登录和用户注册时，总会用到倒计时效果，今天就来给大家讲讲手机登录时验证码倒计时效果的实现。

老规矩，先看效果图

可以看到，我们在点击获取验证码以后，就开始倒计时了，正常都是从60s倒计时的，这里为了演示方便，我从6s开始的。可以看到倒计时结束后，按钮又恢复了可以点击的状态。

一，index.wxml布局

布局很简单，就是一个用户获取手机号输入，一个用来获取验证码输入，一个获取验证码按钮，一个登录按钮。

二，index.wxss样式

.item {
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
  margin-top: 25rpx;
  padding-bottom: 25rpx;
  border-bottom: 1px solid gainsboro;
}

.tip {
  font-size: 0.5rem;
  color: red;
}

.tip2 {
  font-size: 0.8rem;
  color: black;
}

.btn {
  color: white;
  background: #0271c1;
  font-size: 0.9rem;
  width: 90%;
  margin-top: 60rpx;
}

.input {
  margin-left: 40rpx;
}

.input2 {
  width: 50%;
}

.plac {
  color: #aab2bd;
  font-size: 0.8rem;
  /* placeholder位置  *//* text-align: right; */
}

/* 验证吗 */
.code {
  width: 160rpx;
  border: 1px solid #0271c1;
  font-size: 0.8rem;
  text-align: center;
  padding: 10rpx;
  position: absolute;
  right: 15rpx;
}

样式我就不具体讲解了，重要的是下面的倒计时的js事件。

三，index.js实现倒计时效果

1，首先看下倒计时实现的部分。

上图红框里是我们实现倒计时的核心代码，可以看到我们主要是用了setInterval 这个方法来实现每个1s的计时器。这里我们定义一个countDownTime，初始值为6s，然后我们每隔1s，对countDownTime做减1操作，直到countDownTime的值小于2，也就是等于1时，我们用clearInterval方法取消计时器。

2，动态改变按钮文字颜色。这里之前经常有同学问过，怎么在js里动态改变小程序组件的样式。其实小程序这点做的不如vue好，不能在js里获取到组件的实例。所以我们就要换个方式了。

<!-- 这里我们同在在wxml里写style来实现样式的动态改变 -->
<text class="code" style="color:{{codeColor}};" >获取验证码</text>

这个时候我们在去看第一个，倒计时里写的下面这段代码。这里就是用来动态改变按钮上文字颜色的方法。

     if (countDownTime < 2) {
        that.setData({
          codeColor: "#0271c1",
          codeText: "获取验证码"
        })
      } else {
        that.setData({
          codeColor: "#e6252b",
          codeText: "60s"
        })
      }

我们这里还有做一步处理，就是在倒计时过程中，用户不能再次点击获取验证码的按钮，获取点击时要给用户提示。

下面把index.js的完整代码贴出来给大家

//老师微信2501902696
let timeNum = 6 //60秒倒计时
let countDownTime = timeNum
let timer; //计时器
Page({
  data: {
    codeColor: "#0271c1",
    codeText: "获取验证码"
  },
  //获取验证码
  getCode() {
    if (countDownTime == timeNum) {
      this.setInterval()
      this.setData({
        codeColor: "#e6252b",
        codeText: countDownTime + "s"
      })
    } else {
      wx.showToast({
        title: '请等待验证码',
        icon: "none"
      })
    }
  },

  // 计时器
  setInterval: function() {
    const that = this
    timer = setInterval(function() { // 设置定时器
      countDownTime--
      if (countDownTime < 2) {
        clearInterval(timer)
        that.setData({
          codeColor: "#0271c1",
          codeText: "获取验证码"
        })
        countDownTime = timeNum
      } else {
        that.setData({
          codeColor: "#e6252b",
          codeText: countDownTime + "s"
        })
      }
      console.log(countDownTime + "s")
    }, 1000)
  },
})

这样我们就能实现微信小程序在登录或者注册时实现验证码倒计时的效果了。