微信小程序发送验证码倒计时

wxml:  

 
      <view bindtap="dongtai" wx:if="{{send}}">
          <text>发送动态码</text>
        </view>
        <view wx:else>
          <text>{{seconds}}s后发送</text>
        </view>

js:

/**
   * 页面的初始数据
   */
  data: {
    // 发送按钮显示
    send:true,
    // 当前倒计时秒数
    seconds:"",
    // 总秒数
    max_seconds:5,
  },

/**
   * 发送验证码
   */
  dongtai:function(){
    var that=this;
    // 获取总秒数
    var seconds=this.data.max_seconds;
    this.setData({
      // 显示倒计时
      send:false,
      // 设置秒数
      seconds:seconds,
    })
    // 设置定时器
    var t=setInterval(function(){
      // 如果秒数小于0
      if(seconds<=0){
        // 停止定时器
        clearInterval(t);
        that.setData({
          // 显示发送按钮
          send:true,
        })
        // 停止执行
        return;
      }
      // 秒数减一
      seconds--;
      that.setData({
        // 更新当前秒数
        seconds:seconds,
      })
    },1000)
  },
 
 

猜你喜欢

转载自www.cnblogs.com/haoming159/p/12891728.html