小程序60s验证码倒计时实现

流程：
1.验证码时间期限为60秒。

2.点击获取验证码开始倒计时。

3.倒计时为0秒时,重新展示获取验证码。

代码:
wxml:

<view class="verify_content">
          <view>
            <image src="http://ico.dongtiyan.com/tu-31.png"></image>
            <input placeholder="请输入验证码" value="" placeholder-class="color: #999999;"></input>
          </view>
          <block wx:if="{{countNum==60 || countNum==-1}}">
            <view bindtap="timeKeep" style="color: #F73A3F;;">获取验证码</view>
          </block>
          <block wx:else>
            <view style="color: rgb(165, 165, 165)">{{countNum}}s后重新发送</view>
          </block>
        </view>

wxss:

.verify_content view:nth-child(1) {
  display: flex;
  align-items: center;
}
.verify_content view:nth-child(1) input {
  width: 260rpx;
}
.verify_content view:nth-child(1) image {
  width: 26rpx;
  height: 28rpx;
  margin-right: 18rpx;
}

js:

data: {
    timer: "",            // 定时器名字
    countNum: '60', // 倒计时初始值
  },
timeKeep() {
    let countNum = this.data.countNum;             // 获取倒计时初始值
    let timer = setInterval(()=> {
      countNum -= 1;
      this.setData({
        countNum
      })
      if(countNum < 0) {
        clearInterval(timer);
        // 取消置顶的setInterval函数将要执行的代码
        this.setData({
          countNum: 60,
        })
      }
    }, 1000)
  },