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

2023-05-23 1086

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

老规矩，先看效果图

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

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

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

老规矩，先看效果图

一，index.wxml布局

二，index.wxss样式

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

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

老规矩，先看效果图

一，index.wxml布局

二，index.wxss样式

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

热门文章

最新文章

相关课程

相关电子书