当前位置：首页 > VUE

vue实现正计时

2026-01-16 22:10:10VUE

实现正计时的基本思路

在Vue中实现正计时功能，可以通过以下方法完成。正计时通常从0开始，逐步增加时间显示。

使用data属性存储计时数据

在Vue组件的data中定义计时相关的变量，包括当前计时值和计时器对象。

data() {
  return {
    timer: null,
    seconds: 0
  }
}

启动计时的方法

定义一个方法用于启动计时器，使用setInterval函数每1000毫秒（1秒）更新一次计时值。

methods: {
  startTimer() {
    this.timer = setInterval(() => {
      this.seconds++
    }, 1000)
  }
}

停止计时的方法

定义一个方法用于清除计时器，防止内存泄漏。

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

重置计时的方法

定义一个方法将计时值重置为0，并停止当前计时。

methods: {
  resetTimer() {
    this.stopTimer()
    this.seconds = 0
  }
}

格式化显示时间

创建一个计算属性，将秒数格式化为更易读的时分秒格式。

computed: {
  formattedTime() {
    const hours = Math.floor(this.seconds / 3600)
    const minutes = Math.floor((this.seconds % 3600) / 60)
    const secs = this.seconds % 60

    return [
      hours.toString().padStart(2, '0'),
      minutes.toString().padStart(2, '0'),
      secs.toString().padStart(2, '0')
    ].join(':')
  }
}

组件生命周期管理

在组件销毁时自动停止计时器，避免内存泄漏。

beforeDestroy() {
  this.stopTimer()
}

完整组件示例

将上述代码整合为一个完整的Vue组件示例。

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

<script>
export default {
  data() {
    return {
      timer: null,
      seconds: 0
    }
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.seconds / 3600)
      const minutes = Math.floor((this.seconds % 3600) / 60)
      const secs = this.seconds % 60

      return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        secs.toString().padStart(2, '0')
      ].join(':')
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.seconds++
      }, 1000)
    },
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    resetTimer() {
      this.stopTimer()
      this.seconds = 0
    }
  },
  beforeDestroy() {
    this.stopTimer()
  }
}
</script>

使用Vue Composition API实现

如果使用Vue 3的Composition API，可以通过以下方式实现。

vue实现正计时

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

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

export default {
  setup() {
    const timer = ref(null)
    const seconds = ref(0)

    const formattedTime = computed(() => {
      const hours = Math.floor(seconds.value / 3600)
      const minutes = Math.floor((seconds.value % 3600) / 60)
      const secs = seconds.value % 60

      return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        secs.toString().padStart(2, '0')
      ].join(':')
    })

    const startTimer = () => {
      timer.value = setInterval(() => {
        seconds.value++
      }, 1000)
    }

    const stopTimer = () => {
      if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
      }
    }

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

    onBeforeUnmount(() => {
      stopTimer()
    })

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