uni-app 秒表功能

在 uni-app 中实现秒表功能，可以通过使用 Vue 的数据绑定和生命周期钩子来实现。以下是一个简单的秒表功能的代码示例：

1. 创建页面和组件：

首先，在 pages 目录下创建一个新的页面，例如 stopwatch.vue。

1. 页面代码：

<template>
  <view class="container">
    <view class="stopwatch">
      <text>{{ formattedTime }}</text>
      <button @click="startStopwatch">Start</button>
      <button @click="stopStopwatch">Stop</button>
      <button @click="resetStopwatch">Reset</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startTime: null,
      elapsedTime: 0,
      timer: null,
    };
  },
  computed: {
    formattedTime() {
      let minutes = Math.floor(this.elapsedTime / 60);
      let seconds = this.elapsedTime % 60;
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  methods: {
    startStopwatch() {
      if (!this.timer) {
        this.startTime = Date.now() - this.elapsedTime;
        this.timer = setInterval(() => {
          this.elapsedTime = Date.now() - this.startTime;
        }, 1000);
      }
    },
    stopStopwatch() {
      clearInterval(this.timer);
      this.timer = null;
    },
    resetStopwatch() {
      this.stopStopwatch();
      this.elapsedTime = 0;
    },
  },
  onUnload() {
    this.resetStopwatch(); // 清理定时器，防止内存泄漏
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
.stopwatch {
  text-align: center;
}
button {
  margin: 5px;
}
</style>

1. 功能解释：

• startTime 存储秒表开始的时间戳。
• elapsedTime 存储经过的时间（以秒为单位）。
• timer 存储定时器的ID，用于清除定时器。
• formattedTime 是一个计算属性，用于格式化显示的时间。
• startStopwatch 方法启动秒表，如果定时器未启动，则设置 startTime 并启动定时器。
• stopStopwatch 方法停止秒表，清除定时器。
• resetStopwatch 方法重置秒表，停止定时器并将 elapsedTime 重置为0。
• onUnload 生命周期钩子在页面卸载时调用，确保清除定时器以防止内存泄漏。

这样，你就可以在 uni-app 中实现一个简单的秒表功能了。