当前位置：首页 > VUE

vue实现计时功能

2026-01-17 15:45:14VUE

使用 Vue 实现计时功能

在 Vue 中实现计时功能可以通过多种方式完成，以下是几种常见的实现方法。

使用 setInterval 实现基础计时器

通过 setInterval 创建一个计时器，并在 Vue 的 data 中定义计时变量。

<template>
  <div>
    <p>{{ formattedTime }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      seconds: 0,
      isRunning: false
    };
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.seconds / 60);
      const remainingSeconds = this.seconds % 60;
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    }
  },
  methods: {
    startTimer() {
      if (!this.isRunning) {
        this.isRunning = true;
        this.timer = setInterval(() => {
          this.seconds++;
        }, 1000);
      }
    },
    stopTimer() {
      if (this.isRunning) {
        clearInterval(this.timer);
        this.isRunning = false;
      }
    },
    resetTimer() {
      this.stopTimer();
      this.seconds = 0;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

使用 Vue Composition API 实现计时器

如果使用 Vue 3 的 Composition API，可以通过 ref 和 onUnmounted 实现计时功能。

<template>
  <div>
    <p>{{ formattedTime }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

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

export default {
  setup() {
    const seconds = ref(0);
    const isRunning = ref(false);
    let timer = null;

    const formattedTime = computed(() => {
      const minutes = Math.floor(seconds.value / 60);
      const remainingSeconds = seconds.value % 60;
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    });

    const startTimer = () => {
      if (!isRunning.value) {
        isRunning.value = true;
        timer = setInterval(() => {
          seconds.value++;
        }, 1000);
      }
    };

    const stopTimer = () => {
      if (isRunning.value) {
        clearInterval(timer);
        isRunning.value = false;
      }
    };

    const resetTimer = () => {
      stopTimer();
      seconds.value = 0;
    };

    onUnmounted(() => {
      clearInterval(timer);
    });

    return {
      formattedTime,
      startTimer,
      stopTimer,
      resetTimer
    };
  }
};
</script>

使用第三方库实现更高级功能

如果需要更复杂的计时功能（如暂停、记录分段时间等），可以使用第三方库如 vue-timer-hook。

安装 vue-timer-hook：

npm install vue-timer-hook

使用示例：

vue实现计时功能

<template>
  <div>
    <p>{{ minutes }}:{{ seconds }}</p>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { useTimer } from 'vue-timer-hook';

export default {
  setup() {
    const time = new Date();
    time.setSeconds(time.getSeconds() + 0); // 从 0 开始

    const timer = useTimer(time);

    return {
      minutes: timer.minutes,
      seconds: timer.seconds,
      start: timer.start,
      pause: timer.pause,
      reset: timer.reset
    };
  }
};
</script>