微信小程序实现验证码倒计时效果微信小程序实现验证码倒计时

本文实例为大家分享了微信小程序验证码倒计时效果的具体代码，供大家参考，具体内容如下
如果写过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:

手机快捷登录获取动态码重发（{{daojishi}}）手机登录

js:

// pages/dltel/dltel.jsimport {sendCode,mobileLogin} from "../../utils/requst/api.js"; Page({/*** 页面的初始数据*/data: {navbarData: {isfixed: false,iswhite: false, //icon colorshowCapsule: 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; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。