js实现秒表计时器

实现 js 的秒表计时器功能，可以按照以下步骤进行：

1. 创建页面结构

页面需要包含一个显示时间的区域和三个按钮，分别是“开始计时”、“暂停计时”和“重置计时”按钮。按钮可以使用 button 标签创建，显示时间的区域可以使用 div 标签创建。

下面是一个简单的页面结构示例：

<div id="clock">00:00:00</div>
<button id="start">开始计时</button>
<button id="pause">暂停计时</button>
<button id="reset">重置计时</button>

2. 编写 JavaScript 代码

首先，我们需要定义一个计时器变量（timer），并且初始化为 0。

let timer = 0;

接下来，我们需要编写一个函数，用于将计时器的时间转换为可读的格式。该函数接受一个参数 timeInSeconds，代表了当前的计时器时间，单位为秒。函数内部首先将时间转换为小时、分钟和秒的形式，然后将它们格式化成两位数，并且返回字符串类型的时间格式。

function formatTime(timeInSeconds) {
  const hours = Math.floor(timeInSeconds / 3600);
  const minutes = Math.floor((timeInSeconds % 3600) / 60);
  const seconds = timeInSeconds % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes
    .toString()
    .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

接下来，我们需要编写一个函数，将时间显示在页面上。该函数内部调用上面编写的 formatTime 函数，将计时器的时间格式化并赋值给显示时间的区域。

function displayTime() {
  const clock = document.getElementById('clock');
  clock.textContent = formatTime(timer);
}

然后，我们需要编写一个函数，用于开始计时。该函数内部需要调用 setInterval 函数来递增计时器变量 timer，并且每秒更新显示区域的时间。

注意，该函数需要避免重复调用，考虑到用户可能需要在运行时暂停计时器，我们可以在函数内部添加一个状态变量 isRunning，用于判断当前计时器是否在运行状态。

let isRunning = false;
function startTimer() {
  if (!isRunning) {
    isRunning = true;
    setInterval(() => {
      timer++;
      displayTime();
    }, 1000);
  }
}

接下来，我们需要编写一个函数，暂停计时器。该函数内部需要清除之前 setInterval 函数的计时器，并且将 isRunning 变量置为 false。这样，当用户再次点击“开始计时”按钮时，计时器才能继续运行。

function pauseTimer() {
  if (isRunning) {
    clearInterval(timerInterval);
    isRunning = false;
  }
}

最后，我们需要编写一个函数，用于重置计时器。该函数需要清空计时器变量并将显示时间区域中的内容重置为“00:00:00”。

function resetTimer() {
  timer = 0;
  displayTime();
}

3. 示例说明

示例一

在按钮上添加 click 事件，用事件委托的方式监听多个按钮的点击事件。

const btnWrapper = document.querySelector('.btn-wrapper');
btnWrapper.addEventListener('click', (e) => {
  const target = e.target;
  switch (target.id) {
    case 'start':
      startTimer();
      break;
    case 'pause':
      pauseTimer();
      break;
    case 'reset':
      resetTimer();
      break;
    default:
      break;
  }
});

示例二

将计时器应用于一个元素上，并且支持在所有的子元素中通过命名规则来控制计时器。

const clock = document.getElementById('clock');
clock.start = function () {
  startTimer();
};
clock.pause = function () {
  pauseTimer();
};
clock.reset = function () {
  resetTimer();
};
clock.addEventListener('click', (e) => {
  const target = e.target;
  if (target.classList.contains('start')) {
    clock.start();
  } else if (target.classList.contains('pause')) {
    clock.pause();
  } else if (target.classList.contains('reset')) {
    clock.reset();
  }
});

在这个示例中，我们可以在元素的子元素中添加 .start, .pause, .reset 类名来控制计时器。在页面中使用该计时器时，可以用以下方式创建元素：

<div id="clock">
  <span class="start">开始计时</span>
  <span class="pause">暂停计时</span>
  <span class="reset">重置计时</span>
</div>

当点击该元素中任意一个子元素时，都能控制计时器开始、暂停或者重置。