vue实现计时器

实现计时器的基本思路

在Vue中实现计时器功能通常需要利用setInterval或setTimeout进行时间计算，并通过Vue的响应式特性更新显示。计时器的核心逻辑包括开始、暂停、继续和重置等操作。

基本计时器实现

创建一个简单的计时器组件，包含显示时间和控制按钮：

<template>
  <div>
    <h2>{{ formattedTime }}</h2>
    <button @click="startTimer" :disabled="isRunning">开始</button>
    <button @click="pauseTimer" :disabled="!isRunning">暂停</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

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

倒计时实现

倒计时功能与正向计时类似，但需要设置初始时间并递减：

<template>
  <div>
    <h2>{{ formattedTime }}</h2>
    <button @click="startCountdown" :disabled="isRunning">开始</button>
    <button @click="pauseCountdown" :disabled="!isRunning">暂停</button>
    <button @click="resetCountdown">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initialTime: 60, // 初始60秒
      time: 60,
      isRunning: false,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.time / 60)
      const seconds = this.time % 60
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  },
  methods: {
    startCountdown() {
      if (!this.isRunning) {
        this.isRunning = true
        this.timer = setInterval(() => {
          if (this.time > 0) {
            this.time--
          } else {
            clearInterval(this.timer)
            this.isRunning = false
          }
        }, 1000)
      }
    },
    pauseCountdown() {
      clearInterval(this.timer)
      this.isRunning = false
    },
    resetCountdown() {
      clearInterval(this.timer)
      this.isRunning = false
      this.time = this.initialTime
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

使用Vue 3 Composition API实现

在Vue 3中可以使用Composition API更简洁地实现计时器：

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

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

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

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

    function start() {
      if (!isRunning.value) {
        isRunning.value = true
        timer = setInterval(() => {
          time.value++
        }, 1000)
      }
    }

    function pause() {
      clearInterval(timer)
      isRunning.value = false
    }

    function reset() {
      clearInterval(timer)
      isRunning.value = false
      time.value = 0
    }

    onBeforeUnmount(() => {
      clearInterval(timer)
    })

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

性能优化注意事项

避免直接操作DOM，利用Vue的响应式系统更新显示。在组件销毁时务必清除定时器，防止内存泄漏。对于高精度计时需求，可以考虑使用requestAnimationFrame代替setInterval。

扩展功能建议

计时器可以扩展添加以下功能：记录多个计时结果（圈数）、自定义初始时间、保存计时记录到本地存储、添加音效提示等。这些功能可以通过添加额外的数据属性和方法来实现。