微信小程序 定时器setInterval,简单易用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yechaoa/article/details/81985664

使用场景:获取验证码

1,data中定义参数

data: {
     color: "#ff6f10",
     disabled: false,
     getCode: "获取验证码",
},

2,wxml中的引用

<button size="mini" type="default"  plain="true" class='form-code-btn' bindtap='sendCode' style='color:{{color}}; border-color: {{color}};background-color:#FFF;' disabled="{{disabled}}">{{getCode}}</button>

3,定义的事件sendCode

sendCode: function(e) {
     var that = this;
     var times = 0
     var i = setInterval(function() {
          times++
          if (times >= 60) {
               that.setData({
                    color: "#ff6f10",
                    disabled: false,
                    getCode: "获取验证码",
               })
               clearInterval(i)
          } else {
               that.setData({
                    getCode: "重新获取" + times + "s",
                    color: "#999",
                    disabled: true
               })
          }
     }, 1000)
}

每秒执行一次,并定义一个变量记录
60s之内,设置文字显示、颜色、不可点击
之后,同上,并且清除定时器,即clearInterval(i)


猜你喜欢

转载自blog.csdn.net/yechaoa/article/details/81985664