微信小程序验证码获取倒计时

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;
}