微信小程序 倒计时

微信小程序倒计时功能 可以用于短信验证码的倒计时等

方法1.  

Js:

function countdown(that) {
  var second = that.data.countdown_time
    if(second == 0) {
      console.log("001");
      // console.log("Time Out...");
      that.setData({
          // second: "Time Out..."
      
        showtime1: true,
        showtime2: false,
        reg_hqyzm: "重新获取",
        countdown_time:5,
      });
      console.log("002");
      return;
    }
    console.log("003");
    var time = setTimeout(function () { 
    that.setData({
      countdown_time: second - 1
    });  
    countdown(that);
  }
    , 1000)
}


Page({
  /**
   * 页面的初始数据
   */
  data: {
    
    showtime1: true,
    showtime2: false,
    reg_hqyzm: "获取验证码",
    countdown_time: 5,
  
  },

  reg_yanzhengma_huoqu:function(){
    console.log("004");
     this.setData({
       showtime1: false,
       showtime2: true,
       
     });
     countdown(this);
    // wxTimer.start(this);
  },});

wxml:

 <view class="reg_yanzhengma">
      <image class="img_yanzhenma" src="https://img-blog.csdn.net/20170527164756495?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>
      <input class="input_reg_yanzhengma" bindconfirm="input_reg_yanzhengma" placeholder="请输入验证码" type="number"/>
      <view wx:if="{{showtime1}}" class="reg_yanzhengma_time1" bindtap="reg_yanzhengma_huoqu">
      {{reg_hqyzm}}
      </view>
      <view wx:if="{{showtime2}}" class="reg_yanzhengma_time2" >
      倒计时:{{countdown_time}}s
      </view>
      
    </view>

wxss:

.reg_yanzhengma{
  width: 100%;
  height:100rpx;
  margin-top: 10rpx;
  display: flex;
  background: #fff
}
.img_yanzhenma{
  width: 10%;
  height:60rpx;
  margin-top: 20rpx;
  margin-left: 50rpx;
}

.input_reg_yanzhengma{
   width: 55%;
   height:50rpx;
   margin-top: 20rpx;
   margin-left: 50rpx;
   font-size: 28rpx; 
}
.reg_yanzhengma_time1{
   width: 35%;
   height:100%;
   margin-left: 50rpx;
   font-size: 30rpx; 
   background: #0f0;
   line-height: 100rpx;
   text-align: center;
   color: #fff;
}
.reg_yanzhengma_time2{
   width: 35%;
   height:100%;
   margin-left: 50rpx;
   font-size: 30rpx; 
   background: #777777;
   line-height: 100rpx;
   text-align: center;
   color: #fff;
}

方法2. wxTimer 稍后再写