javascript实现手机登陆验证码倒计时效果（小程序登陆倒计时）

咱们在作手机登陆和用户注册时，总会用到倒计时效果，今天就来给你们讲讲手机登陆时验证码倒计时效果的实现。

老规矩，先看效果图

能够看到，咱们在点击获取验证码之后，就开始倒计时了，正常都是从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)
  },
})

复制代码

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

今天就先到这里，下一节给你们讲解手机号的校验，和验证码的随机生成。还有短信验证码的发送都会在后面的文章作讲解。敬请关注。