<--wxml-->
<view>
< input class = 'left last' placeholder = 'Please enter the verification code'></ input >
<button class='gain right' disabled='{{disabled}}' bindtap="bindButtonTap" style="background-color:{{color}}">{{text}}</button>
</view>
//js
Page({
/**
* Initial data of the page
*/
data: {
text: 'Get verification code' , //Button text
currentTime: 61 , //Countdown
disabled: false , // whether to disable
color: '#ff5462' //Button background color
},
bindButtonTap: function () {
var that = this ;
that.setData({
disabled: true , // disable the button immediately after clicking
color: '#ccc',
})
var currentTime = that.data.currentTime //Countdown seconds
var interval = setInterval( function () { //Set a one-minute countdown to 1000
currentTime--; //After each execution, the number of seconds minus one is how many seconds the button text becomes and then resends
that.setData({
text: currentTime + 'Resend in seconds' ,
})
if (currentTime <= 0 ) { //When the number of seconds is less than or equal to 1, the timer stops, the button is available, the button text is resend, and the number of seconds is 61 again
clearInterval(interval)
that.setData({
disabled: false,
color: '#ff5462',
text: 'resend' ,
currentTime: 61
})
}
}, 1000);
},
/**
* Life cycle function--listen to page load
*/
onLoad: function (options) {
},
})