<--wxml-->
<view>
<input class='left last' placeholder='请输入验证码'></input>
<button class='gain right' disabled='{{disabled}}' bindtap="bindButtonTap" style="background-color:{{color}}">{{text}}</button>
</view>
//js
Page({
/**
* 页面的初始数据
*/
data: {
text: '获取验证码', //按钮文字
currentTime: 61, //倒计时
disabled: false, //是否禁用
color: '#ff5462' //按钮背景色
},
bindButtonTap: function () {
var that = this;
that.setData({
disabled: true, //点击之后立马禁用按钮
color: '#ccc',
})
var currentTime = that.data.currentTime //倒计时秒数
var interval = setInterval(function () { //设置了一分钟的倒计时1000
currentTime--; //每只执行一次秒数减一 按钮文字变成多少秒后重发
that.setData({
text: currentTime + '秒后可重发',
})
if (currentTime <= 0) { //当秒数小于等于1时定时器停止 按钮可用状态，按钮文字为重新发送，且秒数再次为61
clearInterval(interval)
that.setData({
disabled: false,
color: '#ff5462',
text: '重新发送',
currentTime: 61
})
}
}, 1000);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})