魔方在线秒表javascript版

魔方在线秒表是一款基于JavaScript开发的网页应用，主要用于计时比赛、训练等场景。下面将为大家详细讲解该应用的完整攻略。

安装与运行

1. 下载代码

从GitHub上下载代码：https://github.com/AlgerHwang/Rubik-s-Cube-Online-Stopwatch，或者通过Git命令克隆仓库：

git clone https://github.com/AlgerHwang/Rubik-s-Cube-Online-Stopwatch.git

1. 运行代码

将代码clone下来后，在本地找到项目的index.html文件并打开，即可在浏览器中看到应用的运行界面。

功能介绍

在应用界面中，有“启动/暂停”、“重置”、“记录”、“清空记录”四个按钮，分别用于控制计时、重置计时、记录已完成的计时、清空已记录的计时。

其中，“启动/暂停”按钮用于开始计时或暂停计时；“重置”按钮用于重置当前计时；“记录”按钮用于记录当前计时并显示在列表中；“清空记录”按钮用于清空所有已记录的计时。

代码说明

以下是应用的核心代码，用于控制计时和记录等操作：

<script>
  let timer // 计时器对象
  let timeTotal = 0 // 计时总时间
  let timeStart = 0 // 计时开始时间
  let running = false // 是否正在计时
  let records = [] // 计时记录

  function updateTime() {
    timeTotal = Date.now() - timeStart
    const hour = Math.floor(timeTotal / 3600000)
    const min = Math.floor((timeTotal - hour * 3600000) / 60000)
    const sec = Math.floor((timeTotal - hour * 3600000 - min * 60000) / 1000)
    const ms = Math.floor(timeTotal - hour * 3600000 - min * 60000 - sec * 1000)
    document.getElementById('time').innerText = `${hour.toString().padStart(2, '0')}:${min
      .toString()
      .padStart(2, '0')}:${sec.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`
  }

  function startStop() {
    if (running) {
      clearInterval(timer)
      running = false
    } else {
      timeStart = Date.now() - timeTotal
      timer = setInterval(updateTime, 10)
      running = true
    }
  }

  function reset() {
    clearInterval(timer)
    timeTotal = 0
    updateTime()
    running = false
  }

  function record() {
    const time = {
      id: records.length,
      time: timeTotal,
    }
    records.push(time)
    const recordList = document.getElementById('record-list')
    const listItem = document.createElement('li')
    listItem.innerText = `#${time.id} ${formatTime(time.time)}`
    recordList.appendChild(listItem)
  }

  function clearRecords() {
    records = []
    document.getElementById('record-list').innerHTML = ''
  }

  function formatTime(time) {
    const hour = Math.floor(time / 3600000)
    const min = Math.floor((time - hour * 3600000) / 60000)
    const sec = Math.floor((time - hour * 3600000 - min * 60000) / 1000)
    const ms = Math.floor(time - hour * 3600000 - min * 60000 - sec * 1000)
    return `${hour.toString().padStart(2, '0')}:${min
      .toString()
      .padStart(2, '0')}:${sec.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`
  }

</script>

示例说明

示例一：计时比赛

现在我们要组织一个速拧魔方比赛，使用魔方在线秒表进行比赛计时。我们可以通过启动/暂停、重置、记录、清空记录等功能完成计时操作，记录比赛成绩。

具体操作步骤如下：

1. 打开魔方在线秒表

在浏览器中打开魔方在线秒表应用的index.html文件。

1. 开始计时

在启动/暂停按钮上点击一下，开始计时。如果要暂停计时，再次点击启动/暂停按钮即可。

1. 完成计时

当魔方开始还原后，我们可以点击启动/暂停按钮暂停计时，记录成绩。点击记录按钮，将成绩记录在列表中。

1. 记录完所有成绩后，清空列表

当所有选手都完成比赛后，我们可以点击清空记录按钮，清空列表。

示例二：个人训练

我们也可以使用魔方在线秒表进行个人魔方训练，通过记录训练成果来提高自己的速度。

具体操作步骤如下：

1. 打开魔方在线秒表

在浏览器中打开魔方在线秒表应用的index.html文件。

1. 开始计时

在启动/暂停按钮上点击一下，开始计时。如果要暂停计时，再次点击启动/暂停按钮即可。

1. 训练完成

当完成一次魔方还原后，我们可以点击启动/暂停按钮暂停计时，并记录成绩。点击记录按钮，将成绩记录在列表中。

1. 继续训练

继续进行下一次训练，重复步骤2-3。

1. 查看训练成果

训练完成后，我们可以查看列表中所有记录的成绩，以及平均成绩，来评价自己的训练成果。