在做微信小程序时,需要发送短信验证码60S倒计时,下面我就写一下我自己的方法
WXML按钮
<button hidden="{{nullHouse1}}" class="get_code" bindtap="getcode" data-mess="{{sms_zt}}" >{{sms_zt}} </button> <button hidden="{{nullHouse2}}" class="get_code">{{second}}s后重新获取</button>
JS
// pages/login/login.js Page({ /** * 页面的初始数据 */ data: { sms_zt : \'发送验证码\', message:\'请输入您的手机号码\', second: 60, nullHouse1: false, nullHouse2:true }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this wx.setNavigationBarTitle({ title: \'绑定手机\' }) //获取用户信息 wx.getStorage({ key: \'user\', success: function (res) { console.log(res.data) that.setData({ user:res.data }) } }) }, getcode: function (e) { var phone = this.data.phone if(!phone){ var that = this; this.setData({ nullHouse: false, //弹窗显示 }) setTimeout(function () { that.setData({ nullHouse: true //弹窗显示 }) }, 2000) }else{ var that = this wx.request({ url: getApp().data.web_url + \'/index.php?s=/Index/api/get_sms\', //获取短信验证码 data: { phone: phone }, header: { "Content-Type": "application/json" }, success: function (res) { console.log(res.data) if(res.data.state == 1){ countdown(that) } } }) } } }) //倒计时方法 function countdown(that) { var second = that.data.second; if (second == 0) { // console.log("Time Out..."); that.setData({ selected: false, selected1: true, second: 60, nullHouse1: false, nullHouse2: true }); return; } var time = setTimeout(function () { that.setData({ second: second - 1, nullHouse1: true, nullHouse2: false }); countdown(that); }, 1000) }