当前位置：首页 > VUE

vue实现计时器

2026-01-22 03:32:47VUE

实现计时器的基本逻辑

在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>

实现倒计时功能

倒计时与正计时逻辑类似，但需要预设一个目标时间并从目标时间倒推。

vue实现计时器

<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>