鸿蒙任务列表与秒表集合软件开发（三）

 秒表部分功能实现解析

// 开始或暂停计时器的方法
  startOrPauseTimer() {
    if (this.isStarted) {
      // 如果计时器已经启动，暂停计时器
      clearInterval(this.interval)
      this.lastTimeElapsed = Date.now() - this.startTime + this.lastTimeElapsed
      this.startPauseButtonText = '开始'
    } else {
      // 如果计时器未启动，开始计时器
      this.startPauseButtonText = '暂停'
      this.startTime = Date.now()
      this.interval = setInterval(() => {
        // 每 100 毫秒更新已经过时间
        this.timeElapsed = Date.now() - this.startTime + this.lastTimeElapsed
      }, 100)
    }
    // 切换计时器状态
    this.isStarted = !this.isStarted
  }

        实现了计时器的开始和暂停功能，通过检查计时器的当前状态来决定是启动还是暂停计时器。每次调用方法时都会切换计时器状态，并更新相关的时间和按钮文本，以提供直观的用户界面体验。

检查计时器状态

首先，方法检查 this.isStarted 的值，以确定计时器当前是启动状态还是暂停状态。

2. 如果计时器已经启动

如果 this.isStarted 为 true，表示计时器正在运行，此时需要暂停计时器：

1. 调用 clearInterval(this.interval) 清除定时器。
2. 计算已经过的时间，并将其累加到 this.lastTimeElapsed 中：Date.now() - this.startTime 计算出当前启动后已经过的时间，加上之前已经累计的时间。
3. 将按钮文本设置为 "开始"：this.startPauseButtonText = '开始'。

3. 如果计时器未启动

如果 this.isStarted 为 false，表示计时器未在运行，此时需要启动计时器：

1. 将按钮文本设置为 "暂停"：this.startPauseButtonText = '暂停'。
2. 记录当前时间为计时器的开始时间：this.startTime = Date.now()。
3. 使用 setInterval 创建一个定时器，每 100 毫秒更新 this.timeElapsed：
   • this.timeElapsed = Date.now() - this.startTime + this.lastTimeElapsed 计算出自计时器启动以来的总时间，包括之前已经累计的时间。

4. 切换计时器状态

最后，将 this.isStarted 的值取反，以便下次调用该方法时执行相反的操作：this.isStarted = !this.isStarted。

// 重置计时器的方法
  resetTimer() {
    this.timeElapsed = 0
    this.lastTimeElapsed = 0
    this.isStarted = false
    this.startPauseButtonText = '开始'
    clearInterval(this.interval)
  }

        实现了重置计时器的功能，通过将相关属性重置为初始状态，清零计时器的已累计时间，并确保定时器被清除，使得计时器可以重新从零开始计时。

resetTimer() 方法有以下功能：

1. 将 this.timeElapsed 和 this.lastTimeElapsed 设置为 0，即清零计时器的已累计时间。
2. 将 this.isStarted 设置为 false，表示计时器未在运行。
3. 将按钮文本设置为 "开始"：this.startPauseButtonText = '开始'。
4. 调用 clearInterval(this.interval) 清除定时器，确保计时器被完全重置。

// 格式化已经过时间为分钟：秒钟：毫秒的字符串
  formatElapsedTime() {
    var minutes = this.convertNumberToStr(this.timeElapsed / 1000 / 60)
    var seconds = this.convertNumberToStr(this.timeElapsed / 1000 % 60)
    var milliSeconds = this.convertNumberToStr(this.timeElapsed % 1000)
    var minutesStr = minutes.padStart(2, '0')
    var secondsStr = seconds.padStart(2, '0')
    var milliSecondsStr = milliSeconds.padStart(3, '0')
    return `${minutesStr}:${secondsStr}:${milliSecondsStr}`
  }

        实现了将已经过的时间（以毫秒为单位）格式化为分钟：秒钟：毫秒的字符串格式。

1. 时间单位转换：

   • this.timeElapsed / 1000 / 60：将总毫秒数转换为分钟数。
   • this.timeElapsed / 1000 % 60：计算总毫秒数转换为秒数后的余数，即剩余的秒数。
   • this.timeElapsed % 1000：获取总毫秒数除以1000的余数，即剩余的毫秒数。

2. 数值转换为字符串：

   • this.convertNumberToStr()：这是一个辅助函数（不在提供的代码中），用于将数字转换为字符串。通常，这个函数用来确保数字格式正确，例如补零到指定的位数。

3. 补零操作：

   • padStart() 方法用于确保分钟、秒钟和毫秒都显示为两位数或三位数，并在不足指定位数时在左侧填充零。

4. 字符串拼接：

   • return 𝑚𝑖𝑛𝑢𝑡𝑒𝑠𝑆𝑡𝑟:minutesStr:{secondsStr}:${milliSecondsStr}``：将格式化后的分钟、秒钟和毫秒字符串拼接成最终的时间格式字符串。

// 将数字转换为两位或三位的字符串表示
  convertNumberToStr(num: number) {
    return parseInt(num + "").toString()
  }

实现了数字的格式转化为三位字符串的功能