javascript设计简单的秒表计时器

以下是“JavaScript设计简单的秒表计时器”的完整攻略：

概述

秒表计时器是一个常见的应用，可用于计时各种活动或事件。在本教程中，我们将使用 JavaScript、HTML 和 CSS 创建一个简单的秒表计时器。

步骤

1. 创建HTML结构

首先，我们需要在HTML中创建计时器的结构。计时器将包含一个显示时间的数字和三个按钮：开始、停止和重置。

<div class="timer">
  <h1 id="display">00:00:00</h1>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
</div>

2. 设置CSS样式

接下来，我们需要为计时器设置CSS样式。这将包括设置样式来控制计时器的外观和布局。

.timer {
  margin: 50px auto;
  text-align: center;
  width: 300px;
}

#display {
  font-size: 60px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  margin-right: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #ccc;
}

button:active {
  background-color: #aaa;
}

3. 创建JavaScript逻辑

现在，我们需要为计时器创建JavaScript逻辑。我们将使用setInterval()和clearInterval()函数来启动和停止计时器。

let timer = null;
let milliseconds = 0;
let seconds = 0;
let minutes = 0;

function startTimer() {
  timer = setInterval(() => {
    milliseconds += 10;
    if (milliseconds == 1000) {
      milliseconds = 0;
      seconds++;
    }
    if (seconds == 60) {
      seconds = 0;
      minutes++;
    }
    display.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}:${milliseconds < 100 ? '0' + (milliseconds < 10 ? '0' + milliseconds : milliseconds) : milliseconds}`;
  }, 10);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  clearInterval(timer);
  timer = null;
  milliseconds = 0;
  seconds = 0;
  minutes = 0;
  display.innerHTML = '00:00:00';
}

document.getElementById('start').addEventListener('click', startTimer);

document.getElementById('stop').addEventListener('click', stopTimer);

document.getElementById('reset').addEventListener('click', resetTimer);

let display = document.getElementById('display');

在这个 JavaScript 逻辑中，我们通过一个计时器变量timer跟踪计时器的状态，同时使用milliseconds、seconds和minutes变量来计算时间，然后每10毫秒更新一次时间并更新显示。

4. 运行并测试计时器

最后，我们将运行并测试我们的计时器。打开浏览器，运行该页面，然后使用“开始”按钮启动计时器，使用“停止”按钮停止计时器，使用“重置”按钮重置计时器。

示例一

开始计时，5秒后停止并重置

startTimer();
setTimeout(() => {
  stopTimer();
  resetTimer();
}, 5000)

示例二

开始计时，10秒后暂停，然后再次开始计时，10秒后停止并重置

startTimer();
setTimeout(() => {
  stopTimer();
  setTimeout(() => {
    startTimer();
    setTimeout(() => {
      stopTimer();
      resetTimer();
    }, 10000);
  }, 5000);
}, 10000);

结论

通过以上步骤，我们创建了一个简单的JavaScript秒表计时器。这是一个基础模板，开发者可以加以扩展和改进。