微信小程序驗證碼獲取倒計時

wxml

<button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> 

js

data:{
	disabled: false,
	code: '獲取驗證碼',
},
goGetCode:function(){
    var that = this;
    var time = 60;
    that.setData({
      code: '60秒后重發',
      disabled: true
    })
    var Interval = setInterval(function() {
      time--;
      if (time>0){
        that.setData({
          code: time + '秒后重發'
        })
      }else{
        clearInterval(Interval);
        that.setData({
          code: '獲取驗證碼',
          disabled: false
        })
      }
    },1000)

}

wxss

button{  
  width:260rpx;
  height:80rpx; 
  padding: 10rpx 0;
  color: #000;
  line-height: 50rpx; 
  font-size: 32rpx;
  color: #fff;
  background: green;
} 
button[disabled]:not([type]){
 background: red; 
  color: #fff;   
}

微信小程序驗證碼獲取倒計時

wxml

<button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> 

js

data:{
	disabled: false,
	code: '獲取驗證碼',
},
goGetCode:function(){
    var that = this;
    var time = 60;
    that.setData({
      code: '60秒后重發',
      disabled: true
    })
    var Interval = setInterval(function() {
      time--;
      if (time>0){
        that.setData({
          code: time + '秒后重發'
        })
      }else{
        clearInterval(Interval);
        that.setData({
          code: '獲取驗證碼',
          disabled: false
        })
      }
    },1000)

}

wxss

button{  
  width:260rpx;
  height:80rpx; 
  padding: 10rpx 0;
  color: #000;
  line-height: 50rpx; 
  font-size: 32rpx;
  color: #fff;
  background: green;
} 
button[disabled]:not([type]){
 background: red; 
  color: #fff;   
}

微信小程序用setData修改數組或對象中的一個屬性值

主看部分wxml

<button wx:if="{{item.btn}}"  class="group-btn" disabled='{{disabled}}'  bindtap="getVerificationCode">{{item.btn}}</button> 

全部

<view class="pos-row">
    <input wx:if="{{item.type=='input'}}" class="{{item.key== 'identify'?'special': 'input'}}" placeholder="{{item.placeholder}}" data-index="{{index}}" data-key="{{item.key}}" bindinput="changeInfo" />
    <button wx:if="{{item.btn}}"  class="group-btn" disabled='{{disabled}}'  bindtap="getVerificationCode">{{item.btn}}</button> 
    <textarea wx:if="{{item.type=='textarea'}}"  placeholder="{{item.placeholder}}" data-key="{{item.key}}" bindinput="changeText"/> 
</view>

需求驗證獲取倒計時

點擊獲取驗證碼變成倒計時

解決方法

• 1、先用一個變量把（list[2].btn）用字符串拼接起來

• 2、將變量寫在[]里面即可

    var btn = "list[" + 2 + "].btn"
    that.setData({
    	[btn]: '60秒后重發',
    })
  

js

Page({
	data:{
		list:[
		 {
	        type: 'input',
	        star: '*',
	        name: '您的姓名',
	        placeholder: '請輸入您的真實姓名'
	      },
	      {
	        type: 'input',        
	        star: '*',        
	        name: '聯系方式',
	        placeholder: '請輸入您的手機號碼'
	      },
	      {
	        type: 'input',        
	        star: '*',        
	        name: '驗證碼',
	        btn: '獲取驗證碼',//倒計時
	        placeholder: '請輸入驗證碼'
	      },
	      {
	        type: 'input',        
	        name: '您的地址',
	        placeholder: '請輸入您的地址'
	      },
	      {
	        type: 'textarea',        
	        name: '您的愛好',
	        placeholder: '請輸入您的愛好'
	      },
	      {
	        type: 'input',        
	        name: '您的年齡',
	        placeholder: '請輸入您的年齡'
	      },
	      {
	        type: 'textarea',        
	        name: '留言備注',
	        placeholder: '請輸入您的留言信息'
	      }
		],
		disabled: false

	},
	  getCode: function () {
	    var that = this;
	    var time = 60;    
	    var btn = "list[" + 2 + "].btn"
	    that.setData({
	      [btn]: '60秒后重發',
	      disabled: true
	    })
	    var interval = setInterval(function () {
	      time--;
	      if(time>0){
	        that.setData({
	          [btn]: time+'秒后重發'
	        });
	      }else{
	        clearInterval(interval);
	        that.setData({
	          [btn]: '獲取驗證碼',
	          disabled: false          
	        });
	      }
	    }, 1000)
	  },
	  getVerificationCode() {
	    var that = this
	    that.getCode();   
	  
	  }
})

wxss

.star {
  display: inline-block;
  width: 10px;
  height: 100%;
  padding-right: 10rpx;
  font-size: 34rpx;
  color: #c21227;
}
.pos-row {
  position: relative;
  display: inline-block;
  width: 70%;
}
.input,textarea {
   width: 95%; 
  height: 66rpx; 
  border: 1px solid #000;
  border-radius: 8rpx;
  padding-left: 20rpx; 
  box-sizing: borde-box; 
  font-size: 28rpx;
  resize: none;
}
.special {
  width: 60%;
  height: 66rpx; 
  border: 1px solid #000;
  border-radius: 8rpx;
  padding-left: 20rpx; 
  margin-right: 10rpx;
  box-sizing: borde-box; 
  font-size: 28rpx;
  resize: none;
  /* text-overflow:clip;
  overflow:hidden;
  white-space:nowrap; */
}
textarea {
  width: 100%;
  height: 100rpx;
  padding: 16rpx 20rpx;
  box-sizing: border-box;
}
.group-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
  width: 50%;
  height: 35px;
 background: #f56730; 
  color: #fff;
  font-size: 28rpx;
  margin:0;
}
.group-btn[disabled]:not([type]){
 background: #f56730; 
  color: #fff;   
}
.from-btn {
  position: absolute;
  bottom: 0; 
  width: 100%;
  height: 70rpx;
  box-sizing: border-box;
  padding: 20px 40rpx 0;
}