在前端开发中，常常需要使用到计时器功能。本文将介绍如何使用 JavaScript 实现一个简单的秒表计时器。
前置知识
在开始之前，我们需要了解一些基础的 JavaScript 知识，包括：
- 如何定义变量和函数
- 如何操作 DOM 元素
- 定时器相关的函数
setInterval和clearInterval
如果您对这些内容还不熟悉，建议先学习相关的基础知识。
实现步骤
- 创建 HTML 结构
我们首先需要创建一个 HTML 页面，其中包含以下结构：
<div id="timer">00:00:00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button>
其中，<div> 元素用于显示计时器的时间，三个 <button> 元素分别用于开始、停止和重置计时器。
- 定义变量
我们需要定义一些变量来保存计时器的状态和数据，包括：
let startTime = 0; // 计时器开始时间
let intervalId = null; // 定时器 ID
let elapsedTime = 0; // 已过时间
let isRunning = false; // 计时器是否正在运行
const timerElement = document.getElementById('timer'); // 显示计时器时间的元素- 实现计时器逻辑
我们可以使用 setInterval 函数来实现计时器逻辑。具体步骤如下：
- 在开始按钮的点击事件中，记录当前时间为计时器开始时间，并启动定时器。
- 在定时器回调函数中，计算已过时间，并将其格式化为字符串后更新显示元素。
- 在停止按钮的点击事件中，清除定时器并更新计时器状态。
- 在重置按钮的点击事件中，清空显示元素并重置计时器状态。
代码如下：
-- -------------------- ---- ------- -------- ------------ - --------- - ----------- ---------- - ------------------------ ---- --------- - ----- - -------- ------------- - ----- --- - ----------- ----------- - --- - ---------- ----- ------------- - ------------------------ ------------------------ - -------------- - -------- ----------- - -------------------------- ---------- - ----- --------- - ------ - -------- ------------ - ------------ ----------- - -- ------------------------ - ----------- - -------- ---------------- - ----- ----- - --------------- - ------------------------------- ----- ----- ------- - ---------------- - -------- - ----------------------------- ----- ----- ------- - ---------------- - ------ - ---------------------------- ----- ----- ------------ - --------------- - ---- - -------------------------- ----- ------ ------------------------------------------------- - ---------------------------------------------------------- ------------ --------------------------------------------------------- ----------- ---------------------------------------------------------- ------------
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----------------- -------------
-------
------
---- -------------------------
------- -------------------------
------- -----------------------
------- -------------------------
--------
--- --------- - -- -- -------
--- ---------- - ----- -- --- --
--- ----------- - -- -- ----
--- --------- - ------ -- ---------
----- ------------ - --------------------------------- -- ----------
-------- ------------ -
--------- - -----------
---------- - ------------------------ ----
--
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------