微信小程序登录与注册验证码倒计时的效果实现
时间:2022-07-28
本文章向大家介绍微信小程序登录与注册验证码倒计时的效果实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们在做手机登录和用户注册时,总会用到倒计时效果,今天就来给大家讲讲手机登录时验证码倒计时效果的实现。
老规矩,先看效果图
可以看到,我们在点击获取验证码以后,就开始倒计时了,正常都是从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)
},
})
这样我们就能实现微信小程序在登录或者注册时实现验证码倒计时的效果了。
今天就先到这里,下一节给大家讲解手机号的校验,和验证码的随机生成。还有短信验证码的发送都会在后面的文章做讲解。敬请关注。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 爬取王者农药全套皮肤
- 时间都去哪儿了--python性能优化
- Python干货 | 遥感影像拼接
- Java8 Stream 创建流
- Java8 Stream 基本类型特化流
- Java8 Stream 自定义收集器Collector
- 收藏|Flink比Spark好在哪?
- SpringCloud Config 分布式配置
- 经过一年的煎熬,我们还是决定把系统升级成基于 Spring Cloud 的微服务架构
- OpenCV:人脸检测。
- 如何设计缓存系统:缓存穿透,缓存击穿,缓存雪崩解决方案分析
- OpenCV:图像检索。
- Zuul路由网关
- OpenCV:模板匹配。
- 【Vulnhub】pipe