vue实现计时器
实现计时器的基本逻辑
在Vue中实现计时器通常需要利用setInterval或setTimeout来更新计时状态，并通过Vue的响应式系统动态显示时间。计时器的核心是记录开始时间、暂停时间以及计算当前时间差。
使用Composition API实现
<template>
<div>
<p>{{ formattedTime }}</p>
<button @click="startTimer">开始</button>
<button @click="pauseTimer">暂停</button>
<button @click="resetTimer">重置</button>
</div>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';
const elapsedTime = ref(0);
const timerInterval = ref(null);
const isRunning = ref(false);
const formattedTime = computed(() => {
const seconds = Math.floor(elapsedTime.value / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
return `${hours.toString().padStart(2, '0')}:${(minutes % 60).toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
});
const startTimer = () => {
if (isRunning.value) return;
isRunning.value = true;
const startTime = Date.now() - elapsedTime.value;
timerInterval.value = setInterval(() => {
elapsedTime.value = Date.now() - startTime;
}, 1000);
};
const pauseTimer = () => {
clearInterval(timerInterval.value);
isRunning.value = false;
};
const resetTimer = () => {
clearInterval(timerInterval.value);
elapsedTime.value = 0;
isRunning.value = false;
};
onUnmounted(() => {
clearInterval(timerInterval.value);
});
</script>使用Options API实现
<template>
<div>
<p>{{ formattedTime }}</p>
<button @click="startTimer">开始</button>
<button @click="pauseTimer">暂停</button>
<button @click="resetTimer">重置</button>
</div>
</template>
<script>
export default {
data() {
return {
elapsedTime: 0,
timerInterval: null,
isRunning: false,
};
},
computed: {
formattedTime() {
const seconds = Math.floor(this.elapsedTime / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
return `${hours.toString().padStart(2, '0')}:${(minutes % 60).toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
},
},
methods: {
startTimer() {
if (this.isRunning) return;
this.isRunning = true;
const startTime = Date.now() - this.elapsedTime;
this.timerInterval = setInterval(() => {
this.elapsedTime = Date.now() - startTime;
}, 1000);
},
pauseTimer() {
clearInterval(this.timerInterval);
this.isRunning = false;
},
resetTimer() {
clearInterval(this.timerInterval);
this.elapsedTime = 0;
this.isRunning = false;
},
},
beforeUnmount() {
clearInterval(this.timerInterval);
},
};
</script>实现倒计时功能
倒计时与正计时逻辑类似，但需要预设一个目标时间并从目标时间倒推。
<template>
<div>
<p>{{ formattedTime }}</p>
<button @click="startCountdown">开始</button>
<button @click="pauseCountdown">暂停</button>
<button @click="resetCountdown">重置</button>
</div>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';
const countdownTime = ref(60 * 1000); // 60秒倒计时
const remainingTime = ref(countdownTime.value);
const countdownInterval = ref(null);
const isRunning = ref(false);
const formattedTime = computed(() => {
const seconds = Math.floor(remainingTime.value / 1000);
return `${Math.floor(seconds / 60).toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
});
const startCountdown = () => {
if (isRunning.value) return;
isRunning.value = true;
const endTime = Date.now() + remainingTime.value;
countdownInterval.value = setInterval(() => {
remainingTime.value = endTime - Date.now();
if (remainingTime.value <= 0) {
clearInterval(countdownInterval.value);
remainingTime.value = 0;
isRunning.value = false;
}
}, 1000);
};
const pauseCountdown = () => {
clearInterval(countdownInterval.value);
isRunning.value = false;
};
const resetCountdown = () => {
clearInterval(countdownInterval.value);
remainingTime.value = countdownTime.value;
isRunning.value = false;
};
onUnmounted(() => {
clearInterval(countdownInterval.value);
});
</script>注意事项
- 清除定时器：在组件卸载时务必清除定时器，避免内存泄漏。
- 性能优化：计时器更新频率不宜过高（如1秒1次足够），避免频繁触发响应式更新。
- 格式化时间：使用
padStart确保时间显示为两位数格式（如01:05而非1:5）。
