微信小程序中如何设置短信验证码的倒计时功能？

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

原文：本文字例为大家分享了微信小程序实现短信验证码倒计时的具体代码，供大家参考。具体内容如下：+ 初始效果+ 点击按钮时，设置禁止点击效果：+ 如下图+ 话不多说，直接上代码+ 1.wxml部分

简化版：分享微信小程序短信验证码倒计时实现代码，包括初始效果和点击按钮禁止效果。代码如下：+ 图+ 直接展示代码+ 1.wxml代码片段

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

初始效果

当点击按钮时候设置禁止点击效果：如下图

话不多说，直接上代码

1.wxml部分

<view>     <block wx:if="{{Num==60 || Num==-1}}">       <button bindtap="countDown">获取验证码</button>     </block>     <block wx:else>       <button disabled='{{isDisabled}}'>{{Num}}s后重新发送</button>     </block> </view>

2.js部分

// pages/push1/push1.js Page({   /**    * 页面的初始数据    */   data: {     timer: "",     Num: '60',      isDisabled:false   },  /**    * 验证码倒计时    */   countDown: function() {     var that=this     var Num=that.data.Num     var isDisabled=this.data.isDisabled     var timer=setInterval(function(){         Num-=1;         that.setData({           Num:Num,           isDisabled:true         })         if(Num<=-1){           clearInterval(timer)           that.setData({             Num:60,             isDisabled:false           })         }     },100)   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {   } })

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