vue实现秒表

实现秒表功能

在Vue中实现秒表功能需要处理时间显示、开始、暂停和重置逻辑。以下是具体实现方式：

基础实现代码

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

<script>
export default {
  data() {
    return {
      startTime: 0,
      elapsedTime: 0,
      timer: null,
      isRunning: false
    }
  },
  computed: {
    formattedTime() {
      const date = new Date(this.elapsedTime)
      const minutes = date.getUTCMinutes().toString().padStart(2, '0')
      const seconds = date.getUTCSeconds().toString().padStart(2, '0')
      const milliseconds = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0')
      return `${minutes}:${seconds}.${milliseconds}`
    }
  },
  methods: {
    start() {
      if (!this.isRunning) {
        this.startTime = Date.now() - this.elapsedTime
        this.timer = setInterval(this.updateTime, 10)
        this.isRunning = true
      }
    },
    pause() {
      clearInterval(this.timer)
      this.isRunning = false
    },
    reset() {
      clearInterval(this.timer)
      this.isRunning = false
      this.elapsedTime = 0
    },
    updateTime() {
      this.elapsedTime = Date.now() - this.startTime
    }
  }
}
</script>

使用Composition API实现

对于Vue 3项目，可以使用Composition API实现：

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

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

const startTime = ref(0)
const elapsedTime = ref(0)
const timer = ref(null)
const isRunning = ref(false)

const formattedTime = computed(() => {
  const date = new Date(elapsedTime.value)
  const minutes = date.getUTCMinutes().toString().padStart(2, '0')
  const seconds = date.getUTCSeconds().toString().padStart(2, '0')
  const milliseconds = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0')
  return `${minutes}:${seconds}.${milliseconds}`
})

function start() {
  if (!isRunning.value) {
    startTime.value = Date.now() - elapsedTime.value
    timer.value = setInterval(updateTime, 10)
    isRunning.value = true
  }
}

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

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

function updateTime() {
  elapsedTime.value = Date.now() - startTime.value
}

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

性能优化建议

对于更精确的计时，可以使用requestAnimationFrame代替setInterval：

methods: {
  start() {
    if (!this.isRunning) {
      this.startTime = Date.now() - this.elapsedTime
      this.isRunning = true
      this.updateTime()
    }
  },
  updateTime() {
    if (this.isRunning) {
      this.elapsedTime = Date.now() - this.startTime
      requestAnimationFrame(this.updateTime)
    }
  }
}

添加分段计时功能

扩展功能实现分段计时（Lap Time）：

data() {
  return {
    // 其他数据...
    laps: []
  }
},
methods: {
  addLap() {
    this.laps.unshift({
      time: this.elapsedTime,
      formattedTime: this.formattedTime
    })
  }
}

在模板中添加分段按钮和显示：

<button @click="addLap" :disabled="!isRunning">分段</button>
<ul>
  <li v-for="(lap, index) in laps" :key="index">
    {{ laps.length - index }}. {{ lap.formattedTime }}
  </li>
</ul>