美文网首页
微信小程序发送短信倒计时代码

微信小程序发送短信倒计时代码

作者: 暂时还没有昵称2222 | 来源:发表于2017-03-16 16:55 被阅读560次

    test.wxml

    <button size="mini" disabled="{{send_disabled}}" bindtap="sendSMSCode">{{send_text}}</button>
    

    test.js

    Page({
      data: {
        send_text: '发送',
        send_disabled: false,
        send_time: null
      },
      onLoad: function (options) {
      },
      onReady: function () {
        // 页面渲染完成
      },
      onShow: function () {
        // 页面显示
      },
      onHide: function () {
        // 页面隐藏
      },
      onUnload: function () {
        // 页面关闭
      },
      sendSMSCode: function () {
        this.setData({
          send_disabled: true
        })
        var that = this
        wx.request({
          url: 'this is your send sms sode url',
          data: {},
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function (res) {
            // success
            // 开始倒计时
            that.setData({
              send_time: Math.round(+new Date() / 1000)
            })
            that.sendCountDown()
          },
          fail: function () {
            // fail
            that.setData({
              send_disabled: false
            })
          },
          complete: function () {
            // complete
          }
        })
      },
      sendCountDown: function () {
        if (!this.data.send_time) {
          return
        }
        var seconds = this.data.send_time + 60 - Math.round(+new Date() / 1000)
        if (seconds > 0) {
          this.setData({
            send_text: `(${seconds}s)`
          })
          setTimeout(this.sendCountDown, 1000)
        } else {
          this.setData({
            send_text: '发送',
            send_disabled: false,
            send_time: null
          })
        }
      }
    })
    

    相关文章

      网友评论

          本文标题:微信小程序发送短信倒计时代码

          本文链接:https://www.haomeiwen.com/subject/xdujnttx.html