js实现计时器秒表功能

如果要使用 JavaScript 实现计时器秒表功能，需要遵循以下步骤：

1. HTML 布局

首先，在 HTML 中创建一个容器用于显示计时器。这可以通过使用<div>元素创建。

<div id="timer">00:00:00</div>

1. CSS 样式

为计时器设置样式，例如对齐方式、字体大小等。以下是一个简单的示例：

#timer {
  font-size: 40px;
  text-align: center;
}

1. JavaScript 代码实现

为了实现计时器，我们需要编写 JavaScript 代码来控制时钟的运行。以下是基本的 JavaScript 代码框架：

let sec = 0;
let min = 0;
let hour = 0;
let timer;

function startTimer() {
  timer = setInterval(function() {
    sec++;
    if (sec == 60) {
      sec = 0;
      min++;
    }
    if (min == 60) {
      min = 0;
      hour++;
    }
    displayTime();
  }, 1000);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  sec = 0;
  min = 0;
  hour = 0;
  displayTime();
}

function displayTime() {
  const secStr = sec < 10 ? "0" + sec : sec;
  const minStr = min < 10 ? "0" + min : min;
  const hourStr = hour < 10 ? "0" + hour : hour;
  document.getElementById("timer").innerHTML = hourStr + ":" + minStr + ":" + secStr;
}

上面的代码中，我们定义了一个计时器并将其初始化为 00:00:00。我们还定义了三个功能函数：

• startTimer()：开始计时器
• stopTimer()：停止计时器
• resetTimer()：重置计时器

startTimer()函数使用 JavaScript 中的 setInterval()方法来更新秒表。每秒钟增加 sec 值。如果时钟到达 60 秒，将增加 min 值，如果时钟到达 60 分钟，将增加 hour 值。

在每次更新后，我们调用displayTime()函数以在 HTML 中显示当前计时器值。

stopTimer () 函数使用 JavaScript 中的 clearInterval() 方法来停止计时器，并清除定时器。

resetTimer()函数将计时器数据设置为 00:00:00，并调用 displayTime() 函数以在 HTML 中显示更新后的计时器值。

最后，要在 HTML 中创建三个按钮，用于开始、停止和重置计时器：

<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>
<button onclick="resetTimer()">Reset</button>

1. 示例说明

下面给出两个使用onclick调用 JavaScript 函数的示例。

<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>
<button onclick="resetTimer()">Reset</button>

还可以通过使用事件监听器来调用函数：

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);

这是一种更加标准的实现按钮点击调用函数的方式。