评论

微信小程序登录与注册验证码倒计时的效果实现(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)
  },
})

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

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

最后一次编辑于  09-06  
点赞 0
收藏
评论

5 个评论

  • 天道
    天道
    09-07

    以绕行

    09-07
    赞同 2
    回复
  • 罗梅光
    罗梅光
    10-08

    不错,很好。

    把setInterval作为函数名很靓。


    10-08
    赞同
    回复 1
    • 编程小石头
      编程小石头
      10-08
      哈哈,谢谢。共进步
      10-08
      回复
  • 少年啦
    少年啦
    09-07

    在小程序里 基本上不想再用setInterval 直接给按钮设置了个loading动画 setTimeOut控制一下

    09-07
    赞同
    回复 1
    • 编程小石头
      编程小石头
      09-07
      嗯,也是一种方法
      09-07
      回复
  • 你是我瞳孔中的太阳
    你是我瞳孔中的太阳
    09-07

    验证码倒计时不是很常见的吗?怎么还把自己源码贴出来了。

    09-07
    赞同
    回复 1
    • 编程小石头
      编程小石头
      09-07
      哈哈,这篇文章是写给零基础的同学的,高手可以绕行了。后面会在这个代码的基础上,写短信验证码的发送。
      09-07
      回复
  • Run
    Run
    09-06

    有一个很重要的规范问题,就是es5语法和es6混淆使用

    09-06
    赞同
    回复 1
    • 编程小石头
      编程小石头
      10-08
      小程序里会自动转换的
      10-08
      回复