支付宝小程序验证码倒计时实现代码
时间: 2024-06-08 08:10:57 浏览: 12
支付宝小程序验证码倒计时可以通过以下代码实现:
1. 在.wxml文件中添加以下代码:
```html
<button type="primary" onTap="getCode" disabled="{{disabled}}">{{btnText}}</button>
```
2. 在.js文件中添加以下代码:
```javascript
Page({
data: {
btnText: "获取验证码",
disabled: false,
second: 60
},
getCode() {
let that = this;
let intervalId = setInterval(function () {
if (that.data.second > 1) {
that.setData({
disabled: true,
btnText: that.data.second - 1 + "秒后重试",
second: that.data.second - 1
});
} else {
clearInterval(intervalId);
that.setData({
disabled: false,
btnText: "获取验证码",
second: 60
});
}
}, 1000);
}
})
```
3. 在.js文件中实现获取验证码的逻辑,例如:
```javascript
getCode() {
let that = this;
// 调用支付宝接口发送短信验证码
my.httpRequest({
url: 'https://api.xxx.com/sms/send',
method: 'POST',
data: {
phone: '13800138000'
},
success: function (res) {
if (res.data.code === 0) {
my.showToast({
content: '验证码发送成功'
});
that.startCountdown();
} else {
my.showToast({
content: res.data.msg
});
}
}
});
},
startCountdown() {
let that = this;
let intervalId = setInterval(function () {
if (that.data.second > 1) {
that.setData({
disabled: true,
btnText: that.data.second - 1 + "秒后重试",
second: that.data.second - 1
});
} else {
clearInterval(intervalId);
that.setData({
disabled: false,
btnText: "获取验证码",
second: 60
});
}
}, 1000);
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)