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

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

转载于:https://www.cnblogs.com/DCL1314/p/9442045.html