当前位置：首页 > VUE

vue实现正计时

2026-03-29 14:37:32VUE

实现正计时的基本思路

在Vue中实现正计时功能，通常需要利用setInterval或requestAnimationFrame来持续更新计时器的显示。核心步骤包括初始化计时器状态、启动计时、停止计时以及显示格式化时间。

初始化计时器状态

在Vue组件的data或setup函数中定义计时器的初始状态，包括开始时间、当前时间和计时器ID：

data() {
  return {
    startTime: 0,
    currentTime: 0,
    timer: null
  };
}

启动计时器

通过setInterval每毫秒更新一次当前时间，并保存计时器ID以便后续清理：

vue实现正计时

startTimer() {
  this.startTime = Date.now();
  this.timer = setInterval(() => {
    this.currentTime = Date.now() - this.startTime;
  }, 10); // 10毫秒更新一次，提高精度
}

停止计时器

使用clearInterval停止计时器，并重置计时器ID：

stopTimer() {
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
}

格式化显示时间

将毫秒时间转换为HH:MM:SS格式，便于用户阅读：

vue实现正计时

methods: {
  formatTime(ms) {
    const totalSeconds = Math.floor(ms / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
}

组件模板示例

在模板中绑定计时器状态和操作按钮：

<template>
  <div>
    <div>{{ formatTime(currentTime) }}</div>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

使用Composition API的实现

如果使用Vue 3的Composition API，可以通过ref和onUnmounted简化代码：

import { ref, onUnmounted } from 'vue';

export default {
  setup() {
    const startTime = ref(0);
    const currentTime = ref(0);
    let timer = null;

    const startTimer = () => {
      startTime.value = Date.now();
      timer = setInterval(() => {
        currentTime.value = Date.now() - startTime.value;
      }, 10);
    };

    const stopTimer = () => {
      if (timer) clearInterval(timer);
    };

    onUnmounted(stopTimer); // 组件卸载时自动清理

    return { currentTime, startTimer, stopTimer };
  }
};