当前位置：首页 > VUE

vue实现秒表

2026-02-10 15:11:35VUE

Vue 实现秒表功能

以下是一个基于 Vue 3 的秒表实现方案，包含开始、暂停、重置功能，并支持显示毫秒级精度。

组件模板部分

<template>
  <div class="stopwatch">
    <div class="display">{{ formattedTime }}</div>
    <div class="controls">
      <button @click="start" :disabled="isRunning">开始</button>
      <button @click="pause" :disabled="!isRunning">暂停</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

脚本部分

<script>
import { ref, computed, onUnmounted } from 'vue';

export default {
  setup() {
    const startTime = ref(0);
    const elapsedTime = ref(0);
    const timerInterval = ref(null);
    const isRunning = ref(false);

    const formattedTime = computed(() => {
      const date = new Date(elapsedTime.value);
      return date.toISOString().substr(11, 12);
    });

    const start = () => {
      if (isRunning.value) return;
      isRunning.value = true;
      startTime.value = Date.now() - elapsedTime.value;
      timerInterval.value = setInterval(() => {
        elapsedTime.value = Date.now() - startTime.value;
      }, 10);
    };

    const pause = () => {
      if (!isRunning.value) return;
      isRunning.value = false;
      clearInterval(timerInterval.value);
    };

    const reset = () => {
      isRunning.value = false;
      clearInterval(timerInterval.value);
      elapsedTime.value = 0;
    };

    onUnmounted(() => {
      clearInterval(timerInterval.value);
    });

    return {
      formattedTime,
      isRunning,
      start,
      pause,
      reset
    };
  }
};
</script>

样式部分

<style scoped>
.stopwatch {
  text-align: center;
  margin: 20px;
}

.display {
  font-size: 2em;
  margin-bottom: 20px;
  font-family: monospace;
}

button {
  margin: 0 5px;
  padding: 8px 16px;
  font-size: 1em;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

实现说明

核心逻辑：使用 Date.now() 获取当前时间戳，通过计算时间差实现计时功能。
响应式数据：
- startTime 记录开始计时的时间点
- elapsedTime 存储已过去的时间（毫秒）
- timerInterval 保存计时器引用
- isRunning 控制计时器状态
格式化显示：通过 computed 属性将毫秒转换为 HH:MM:SS.mmm 格式。
生命周期：在组件卸载时清除计时器，防止内存泄漏。
控制按钮：提供开始、暂停、重置三个基本功能，并禁用不合适的操作。