uniapp一分钟倒计时
时间: 2024-06-20 19:00:57 浏览: 10
UniApp 是一个基于 Vue.js 的跨平台框架,它允许开发者用一套代码构建同时运行在微信小程序、H5、App(iOS/Android)等平台的应用。关于一分钟倒计时功能,你可以使用 UniApp 提供的 timer 或者 custom component 来实现。以下是一个简单的示例:
```html
<template>
<view>
<button @click="startTimer">开始倒计时</button>
<text v-if="isRunning" :value="remainingTime">倒计时:{{ remainingTime }}</text>
</view>
</template>
<script>
export default {
data() {
return {
isRunning: false,
remainingTime: '00:01',
};
},
methods: {
startTimer() {
this.isRunning = true;
const intervalId = setInterval(() => {
if (this.remainingTime.split(':') > 0) {
this.remainingTime = this.formatTime(this.subtractSeconds(this.remainingTime, 1));
} else {
this.stopTimer();
this.$message('倒计时结束!');
}
}, 1000);
// 在组件卸载前关闭计时器,避免内存泄漏
this.$onBeforeDestroy(() => clearInterval(intervalId));
},
stopTimer() {
this.isRunning = false;
},
subtractSeconds(timeStr, seconds) {
const [hours, minutes] = timeStr.split(':');
const newMinutes = parseInt(minutes) - seconds;
if (newMinutes < 0) {
newMinutes += 60;
hours--;
}
return `${(hours < 10 ? '0' : '')}${hours}:${(newMinutes < 10 ? '0' : '')}${newMinutes}`;
},
formatTime(time) {
return `${time.split(':')}:${time.split(':')}`;
},
},
};
</script>
```
在这个例子中,我们创建了一个倒计时按钮,点击后开始倒计时,每秒减少一秒,直到时间为0。`formatTime` 和 `subtractSeconds` 函数用于处理时间格式和减法操作。