微信小程序如何实现验证码倒计时功能的长尾词？

本文共计1090个文字，预计阅读时间需要5分钟。

原文示例为：本文字例为大家分享了一个微信小程序验证码倒计时效果的具体代码，供大家参考，具体内容如下：

简单改写为：分享微信小程序验证码倒计时代码，代码如下：

javascriptdata: { daojishi: 60,}

本文实例为大家分享了微信小程序验证码倒计时效果的具体代码，供大家参考，具体内容如下

如果写过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 = "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 = "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;   } }

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