微信小程序实现验证码倒计时效果
本文实例为大家分享了微信小程序验证码倒计时效果的具体代码，供大家参考，具体内容如下
如果写过js的倒计时，那么小程序中使用也是差不多的；
代码：
data: {
daojishi:60,
inter:''
},
daojishi: function () {
this.data.inter = setInterval((res) => {
this.fun();
}, 1000);
},
fun: function () {
let t = this.data.daojishi;
t--;
this.setData({
daojishi: t
})
if (t <= 0) {
// location.href = "https://www.baidu.com";
clearInterval(this.data.inter);
this.setData({
isyanzhengma: true
})
}
},
手机登录、填手机号获取验证码，倒计时后重新获取效果
描述：
输入正确的手机号并且输入验证码后，手机登录按钮变为红色可点击状态；自动验证输入的手机号是否为合法手机号；点击获取动态码后开始60秒倒计时后才可以再次获取动态码；
效果图：
代码：
html:
<view class="dltel">
<view class="teltit">手机快捷登录</view>
<view class="inpbox">
<input placeholder="请输入手机号" class="inpbtn" type='number' maxlength="11" value="{{mobile}}" bindinput='blurPhone' />
<text class="dongtaima {{hui?'hui':'red'}}" wx:if="{{isyanzhengma}}" bindtap="dongtaima">获取动态码</text>
<text class="dongtaima" wx:else>重发（{{daojishi}}）</text>
</view>
<view class="inpbox">
<input placeholder="请输入验证码" value="{[code]}" maxlength="6" class="inpbtn" bindinput="codetap" />
</view>
<view class="teldl {{dlno ? 'tou50':''}}" bindtap="teldltap">
<text class="icontxt">手机登录</text>
</view>
</view>
js:
// pages/dltel/dltel.js
import {
sendCode,
mobileLogin
} from "../../utils/requst/api.js";
Page({
/**
* 页面的初始数据
*/
data: {
navbarData: {
isfixed: false,
iswhite: false, //icon color
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
title: '登录', //导航栏 中间的标题
backgroundcolor: '#fff',
isintercept: false //返回拦截
},
mobile: '',
code: '',
isyanzhengma: true,
hui: true,
dlno: true,
daojishi: 60,
teltrue: false,
inter: '',
},
// 手机号验证
blurPhone: function (e) {
this.setData({
mobile: e.detail.value
})
let phone = this.data.mobile;
if (!(/^1[34578]\d{9}$/.test(phone))) {
this.setData({
teltrue: false,
hui: true,
})
if (phone.length >= 11) {
wx.showToast({
title: '手机号有误',
icon: 'none',
duration: 2000
})
}
} else {
this.setData({
teltrue: true,
hui: false,
})
console.log('验证成功', this.data.teltrue)
}
},
dongtaima: function (e) {
if (this.data.teltrue & !this.data.hui) {
let params = {
mobile: this.data.mobile
}
sendCode(params).then((res) => {
console.log(res);
if (res.data.msg == '发送成功!') {
wx.showToast({
title: res.data.msg,
icon: "none",
duration: 2000
})
this.setData({
isyanzhengma: false
})
this.daojishi();
} else {
wx.showToast({
title: "发送失败，请重发！",
icon: "none",
duration: 2000
})
}
})
} else if (!this.data.teltrue) {
wx.showToast({
title: "请填写正确的手机号！",
icon: "none",
duration: 2000
})
}
},
codetap: function (e) {
// console.log(e);
this.setData({
code: e.detail.value
})
if (this.data.teltrue & this.data.code != '') {
this.setData({
dlno: false
})
}
},
daojishi: function () {
this.data.inter = setInterval((res) => {
this.fun();
}, 1000);
},
fun: function () {
let t = this.data.daojishi;
t--;
this.setData({
daojishi: t
})
if (t <= 0) {
// location.href = "https://www.baidu.com";
clearInterval(this.data.inter);
this.setData({
isyanzhengma: true
})
}
},
teldltap: function () {
let params = {
code: this.data.code,
mobile: this.data.mobile
}
if (this.data.teltrue & this.data.code != '') {
mobileLogin(params).then((res) => {
// console.log(params);
// console.log(res);
if (res.data.message == "ok") { //登录成功 修改参数
//getApp().globalData.token = res.data.data.token;
//getApp().globalData.type = res.data.data.type;
//getApp().globalData.telnum = res.data.data.mobile;
//wx.setStorageSync('token', res.data.data.token);
//wx.setStorageSync('type', res.data.data.type);
//wx.setStorageSync('telnum', res.data.data.mobile);
//let pages = getCurrentPages(); // 当前页的数据，
//let prevPage = pages[pages.length - 3]; // 上上页的数据
//console.log(pages);
//prevPage.setData({
//token: res.data.data.token,
//type: res.data.data.type,
//telnum: res.data.data.mobile
//})
//wx.navigateBack({
//delta: 2
//})
} else {
wx.showToast({
title: res.data.msg, // 未成功原因
icon: "none",
duration: 2000
})
}
})
} else if (!this.data.teltrue) {
wx.showToast({
title: "请填写正确的手机号！",
icon: "none",
duration: 2000
})
} else {
wx.showToast({
title: "请填写验证码！",
icon: "none",
duration: 2000
})
}
},
})
css:(less)
@fontcolor:#353535;
@red:#ff2b0a;
.dltel{
position: relative;
width: 100%;
height: 100vh;
padding:0 40rpx;
box-sizing: border-box;
.teltit{
font-size: 50rpx;
color: @fontcolor;
line-height: 90rpx;
margin-top: 35rpx;
margin-left: 20rpx;
}
.inpbox{
position: relative;
width: 100%;
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
color: @fontcolor;
display: flex;
flex-direction: row;
border-bottom: 1px solid #eee;
.dongtaima{
}
.inpbtn{
width: 430rpx;
height: 100%;
margin:0 30rpx;
}
.hui{
color: #888
}
.red{
color: @red;
}
}
.teldl{
position: relative;
width: 100%;
height: 94rpx;
border-radius: 15rpx;
line-height: 94rpx;
text-align: center;
font-size: 36rpx;
margin-top:60rpx;
color: #fff;
background: @red;
}
.tou50{
background:#ff9584;
}
}
