uniapp实现60s倒计时
时间: 2024-01-24 20:03:30 浏览: 76
uni-app实现获取验证码倒计时功能
以下是uniapp实现60秒倒计时的示例代码:
```html
<template>
<view>
<view v-if="showText" class="send" @click="getCode">发送验证码</view>
<view v-else class="send">{{second}}s重新发送</view>
</view>
</template>
<script>
export default {
data() {
return {
showText: true,
second: 60,
timer: null
};
},
methods: {
getCode() {
this.showText = false;
this.timer = setInterval(() => {
this.second--;
if (this.second === 0) {
clearInterval(this.timer);
this.showText = true;
this.second = 60;
}
}, 1000);
}
}
};
</script>
```
在上述代码中,我们使用了`showText`来控制显示发送验证码或倒计时的文本。初始状态下,`showText`为`true`,显示发送验证码的文本。当点击发送验证码后,我们使用`setInterval`每秒减少`second`的值,并在`second`等于0时清除定时器,将`showText`设置为`true`,并将`second`重置为60。
阅读全文