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

wxml

{{code}}

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

{{code}}

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

{{item.btn}}

全部

{{item.btn}}
<br> </view></p> <h3 id="需求验证获取倒计时">需求验证获取倒计时</h3> <h4 id="点击获取验证码变成倒计时">点击获取验证码变成倒计时</h4> <h4 id="解决方法">解决方法</h4> <ul> <li> <p>1、先用一个变量把（list[2].btn）用字符串拼接起来</p> </li> <li> <p>2、将变量写在[]里面即可</p> <p>var btn = "list[" + 2 + "].btn"<br> that.setData({<br> [btn]: '60秒后重发',<br> })</p> </li> </ul> <p><code>js</code></p> <p>Page({<br> data:{<br> list:[<br> {<br> type: 'input',<br> star: '<em>',<br> name: '您的姓名',<br> placeholder: '请输入您的真实姓名'<br> },<br> {<br> type: 'input',<br> star: '</em>',<br> name: '联系方式',<br> placeholder: '请输入您的手机号码'<br> },<br> {<br> type: 'input',<br> star: '*',<br> name: '验证码',<br> btn: '获取验证码',//倒计时<br> placeholder: '请输入验证码'<br> },<br> {<br> type: 'input',<br> name: '您的地址',<br> placeholder: '请输入您的地址'<br> },<br> {<br> type: 'textarea',<br> name: '您的爱好',<br> placeholder: '请输入您的爱好'<br> },<br> {<br> type: 'input',<br> name: '您的年龄',<br> placeholder: '请输入您的年龄'<br> },<br> {<br> type: 'textarea',<br> name: '留言备注',<br> placeholder: '请输入您的留言信息'<br> }<br> ],<br> disabled: false</p> <p>},<br> getCode: function () {<br> var that = this;<br> var time = 60;<br> var btn = "list[" + 2 + "].btn"<br> that.setData({<br> [btn]: '60秒后重发',<br> disabled: true<br> })<br> var interval = setInterval(function () {<br> time--;<br> if(time>0){<br> that.setData({<br> [btn]: time+'秒后重发'<br> });<br> }else{<br> clearInterval(interval);<br> that.setData({<br> [btn]: '获取验证码',<br> disabled: false<br> });<br> }<br> }, 1000)<br> },<br> getVerificationCode() {<br> var that = this<br> that.getCode();</p> <p>}<br> })</p> <p><code>wxss</code></p> <p>.star {<br> display: inline-block;<br> width: 10px;<br> height: 100%;<br> padding-right: 10rpx;<br> font-size: 34rpx;<br> color: #c21227;<br> }<br> .pos-row {<br> position: relative;<br> display: inline-block;<br> width: 70%;<br> }<br> .input,textarea {<br> width: 95%;<br> height: 66rpx;<br> border: 1px solid #000;<br> border-radius: 8rpx;<br> padding-left: 20rpx;<br> box-sizing: borde-box;<br> font-size: 28rpx;<br> resize: none;<br> }<br> .special {<br> width: 60%;<br> height: 66rpx;<br> border: 1px solid #000;<br> border-radius: 8rpx;<br> padding-left: 20rpx;<br> margin-right: 10rpx;<br> box-sizing: borde-box;<br> font-size: 28rpx;<br> resize: none;<br> /* text-overflow:clip;<br> overflow:hidden;<br> white-space:nowrap; */<br> }<br> textarea {<br> width: 100%;<br> height: 100rpx;<br> padding: 16rpx 20rpx;<br> box-sizing: border-box;<br> }<br> .group-btn {<br> position: absolute;<br> top: 0;<br> right: 0;<br> z-index: 11;<br> width: 50%;<br> height: 35px;<br> background: #f56730;<br> color: #fff;<br> font-size: 28rpx;<br> margin:0;<br> }<br> .group-btn[disabled]:not([type]){<br> background: #f56730;<br> color: #fff;<br> }<br> .from-btn {<br> position: absolute;<br> bottom: 0;<br> width: 100%;<br> height: 70rpx;<br> box-sizing: border-box;<br> padding: 20px 40rpx 0;<br> }</p>