微信小程序04：点击验证码出现倒计时

应用场景：
微信小程序手机验证页面，输入手机号码，点击“获取验证码”之后出现的“60s之后重新获取”

案例效果图：

获取验证码.jpg 60s后重新发送.jpg

实现说明：
点击“获取验证码”按钮，按钮变成“60s之后重新发送”，然后，在用定时器，判断当时间小于1，低于60s的时候，按钮重新变成“获取验证码”。

1.利用css来进行按钮的切换

//wxml
<button class="{{gettime?'disblock':' '}}" size='mini' bindtap='gettimes'>获取验证码</button>
<button class="{{gettime?' ':'disblock'}}" size='mini' >{{counts}}s后重新发送</button>
//利用css的display来显示隐藏按钮。使用三元运算进行简单的判断

js：

data: {
    gettime:false,
    counts:60
  },
gettimes:function(){
  var that = this;
  that.setData({
        gettime:true
   });
//倒计时主要部分，利用定时器
var getsix =  setInterval(function(){
      var times = that.data.counts-1;
      that.setData({
          counts:times
       });
     if (that.data.counts < 1){
        clearInterval(SetCount);
        that.setData({
          gettime: false,
          counts:60
        })
    }
 },1000);
}

2.利用if判断按钮的出现
wxml：

<view>
        <button wx:if="{{GetCount}}"  size="default"  hover-class="other-button-hover" bindtap="Clicktap">点击发送验证码</button>
        <button wx:if="{{!GetCount}}"  type="default" size="default" disabled="true">{{counts}}s后重新发送</button>
</view>

js:

data: {
    GetCount:true,
    counts:60
  },
Clicktap:function(){
  var that = this;
  if(tel == ''){
//判断是否填写手机号码
}else{
//倒计时主要部分，利用定时器
          that.setData({
            GetCount:false
          })
          var SetCount = setInterval(function(){
            var times = that.data.counts-1;
            that.setData({
              counts:times
            });
            if (that.data.counts < 1){
              clearInterval(SetCount);
              that.setData({
                GetCount: true,
                counts:60
              })
            }
          },1000);

}

}

我的难点：
1.取60s的counts的值，使用that.data.counts来表示，前提是我在函数前用了（var that = this）
2.判断的时候，假如counts小于1，按钮变化了之后（gettime的值变化），counts的值应该重新设定60；