用vue实现秒表应用

实现秒表功能

创建Vue组件Stopwatch.vue，定义数据属性time（记录时间）、isRunning（状态标识）和timer（存储计时器）。使用setInterval实现计时逻辑，通过padStart方法格式化显示时间。

<template>
  <div class="stopwatch">
    <div class="display">{{ formattedTime }}</div>
    <button @click="start" :disabled="isRunning">Start</button>
    <button @click="stop" :disabled="!isRunning">Stop</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      isRunning: false,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.time / 60000)
      const seconds = Math.floor((this.time % 60000) / 1000)
      const milliseconds = Math.floor((this.time % 1000) / 10)
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`
    }
  },
  methods: {
    start() {
      if (!this.isRunning) {
        this.isRunning = true
        this.timer = setInterval(() => {
          this.time += 10
        }, 10)
      }
    },
    stop() {
      if (this.isRunning) {
        clearInterval(this.timer)
        this.isRunning = false
      }
    },
    reset() {
      this.stop()
      this.time = 0
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

添加样式增强体验

在组件中添加CSS样式，优化视觉呈现和交互效果。使用Flex布局居中显示，为按钮添加悬停效果。

<style scoped>
.stopwatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: Arial, sans-serif;
}

.display {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
}

button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>

扩展功能实现分段计时

增加分段计时功能，允许用户记录多个时间点。添加laps数组存储分段数据，并实现相关UI展示。

<template>
  <div class="stopwatch">
    <!-- 原有模板内容 -->
    <button @click="recordLap" :disabled="!isRunning">Lap</button>
    <div class="laps" v-if="laps.length > 0">
      <h3>Laps:</h3>
      <ul>
        <li v-for="(lap, index) in laps" :key="index">
          Lap {{ index + 1 }}: {{ formatTime(lap) }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 原有数据
      laps: []
    }
  },
  methods: {
    // 原有方法
    recordLap() {
      this.laps.push(this.time)
    },
    formatTime(time) {
      // 与computed中相同的格式化逻辑
    }
  }
}
</script>

<style scoped>
/* 新增样式 */
.laps {
  margin-top: 1rem;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}
</style>

使用Composition API重构

对于Vue 3项目，可以使用Composition API实现更简洁的代码组织。通过setup()函数和ref响应式变量重构组件。

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

export default {
  setup() {
    const time = ref(0)
    const isRunning = ref(false)
    const timer = ref(null)
    const laps = ref([])

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

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

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

    const reset = () => {
      stop()
      time.value = 0
      laps.value = []
    }

    const recordLap = () => {
      laps.value.push(time.value)
    }

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

    return {
      time,
      isRunning,
      laps,
      formattedTime,
      start,
      stop,
      reset,
      recordLap
    }
  }
}
</script>