小程序獲取手機驗證碼倒計時的方法

.bind_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px;
    display: flex; justify-content: space-between; align-items: center;
}
.bind_input input{ width: 230rpx; height: 50rpx; padding-left: 30rpx;}
.bind_yzm_btn{ width: 160rpx; height: 50rpx; line-height: 50rpx; text-align: center; color: #fff; font-size: 24rpx; border-radius: 25rpx; background-color: #0FC393;}
.bind_yzm_btn.grey{ font-size: 28rpx; background-color: #ccc;}
 
.bind_btn{ width: 450rpx; height: 80rpx; line-height: 80rpx; margin: 40rpx auto 0 auto; text-align: center; color: #fff; font-size: 36rpx; font-weight: 300; border-radius: 40rpx; background-color: #0FC393;
    box-shadow:0px 10px 20px rgba(0,182,142,0.4);
}

<view class="bind_input">
    <input type="tel" value="{{mobile}}" bindinput="setMobile" placeholder="輸入手機號" maxlength="11" placeholder-style="color:#ccc;" />
</view>
 
<view class="bind_input">
    <input type="tel" value="{[code]}" bindinput="setCode" placeholder="短信驗證碼" maxlength="4" placeholder-style="color:#ccc;" />
    <text wx:if="{{ifTimeIn}}" class="bind_yzm_btn grey">{{timeCur}}</text>
    <text wx:else bindtap="getMobileVerify" class="bind_yzm_btn">獲取驗證碼</text>
</view>
 
<view bindtap="bindDo" class="bind_btn">確定</view>

Page({
 
  /**
   * 頁面的初始數據
   */
  data: {
        mobile:'',
        code:'',
        
        // 倒計時參數
        timeStart:60, //倒計時初始值
        timeCur:null, //當前倒計時顯示值
        timer:null,
        
        ifTimeIn:false, //是否倒計時中
        
        ifSendMobileVerify:false, //是否發送成功驗證碼
  },
    
    // 設置用戶輸入的手機號
    setMobile(e){
        // console.log(e.detail.value);
        this.setData({
            mobile : e.detail.value.replace(/\s+/g,"")
        });
    },
    
    // 設置用戶輸入的驗證碼
    setCode(e){
        // console.log(e.detail.value);
        this.setData({
            code : e.detail.value.replace(/\s+/g,"")
        });
    },
    
    
    
    // 倒計時
    setTime(){
        let timeCur = this.data.timeCur - 1;
        // console.log(timeCur);
        if(timeCur < 0){
            clearInterval(this.data.timer);
            this.setData({
                ifTimeIn:false
            });
            return false;
        }
        this.setData({
            timeCur : timeCur
        });
    },
    
    // 獲取驗證碼
    getMobileVerify(){
        if(!this.data.mobile){
            wx.showModal({
                title: '友情提示',
                content: '請輸入手機號',
                showCancel: false,
            });
            return false
        }
        
        if(!/^1\d{10}$/.test(this.data.mobile)){
            wx.showModal({
                title: '友情提示',
                content: '請輸入正確的手機號',
                showCancel: false,
            });
            return false;
        }
        
        wx.showLoading({
          title: "發送中",
          mask: true
        });
        
        let dataJson = {
            mobile : this.data.mobile,
        };
        
        /* ----請求後臺發送驗證碼成功---- */
        // 執行倒計時
        this.setData({
            timeCur : this.data.timeStart,
            timer : setInterval(this.setTime,1000),
            ifTimeIn : true,
            ifSendMobileVerify : true
        });
        /* ----請求後臺發送驗證碼成功---- */
        wx.hideLoading();
    },
    
    // 確定提交
    bindDo(){
        if(!this.data.ifSendMobileVerify){
            wx.showModal({
                title: '友情提示',
                content: '請確定您的手機收到驗證碼再操作',
                showCancel: false,
            });
            return false;
        }
        if(!this.data.code){
            wx.showModal({
                title: '友情提示',
                content: '請輸入驗證碼',
                showCancel: false,
            });
            return false;
        }
        
        /* ----請求後臺提交成功---- */
        wx.showToast({
            title: '成功',
            icon: 'success',
            mask: true,
            duration: 1500
        });
        /* ----請求後臺提交成功---- */
    },
 
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
 
  },
})