微信小程序如何实现短信验证码倒计时

这篇文章主要讲解了“微信小程序如何实现短信验证码倒计时”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序如何实现短信验证码倒计时”吧！

初始效果

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

话不多说，直接上代码

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>

js部分

// pages/push2/push2.jsPage({    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 () {  }})

感谢各位的阅读，以上就是“微信小程序如何实现短信验证码倒计时”的内容了，经过本文的学习后，相信大家对微信小程序如何实现短信验证码倒计时这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！