在前端开发中，创建一个秒表是一项常见的任务。本文将介绍如何使用纯 JavaScript 创建一个简单的秒表，并提供详细的解释和示例代码。
步骤1：HTML结构
首先，我们需要为秒表创建 HTML 结构。在这个例子中，我们将使用 div 元素来包含秒表的所有组件，包括计时器数字、开始按钮、停止按钮和重置按钮。还可以添加其他元素，如标题和样式，以更好地定制秒表的外观。
<div id="stopwatch"> <div id="display">00:00:00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div>
步骤2：CSS 样式
接下来，我们需要为秒表提供 CSS 样式。这些样式将确定秒表的大小和颜色，以及按钮和数字的位置和格式。
-- -------------------- ---- ------- ---------- - ------- --- ----- ------ -------- ----- ------ ------ ----------- ------- - -------- - ---------- ----- -------------- ----- - ------ - ---------- ----- ------------- ---- -
步骤3：JavaScript 功能实现
最后，我们需要实现 JavaScript 代码，以使秒表正常工作。我们将使用 setInterval 函数定期更新秒表的计时器数字，并为每个按钮添加事件监听器以启动、停止和重置秒表。
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ------- - -----------------------------------
----- -------- - ---------------------------------
----- ------- - --------------------------------
----- -------- - ---------------------------------
--- ------
--- ----------
--- ----------- - --
-------- --------------- -
----- ------------ - ----------- - -----
----- ------- - ---------------------- - ----- - ---
----- ------- - ---------------------- - ----- - ---- - ---
----- ----- - ---------------------- - ----- - -- - -----
----- ------------- - -
---------------------------- -----
------------------------------ -----
------------------------------ ----
------------
------------------- - --------------
-
-------- ------------ -
--------- - ---------- - ------------
----- - ---------------------- -
----------- - ---------- - ----------
----------------
-- ----
-
-------- ----------- -
---------------------
-
-------- ------------ -
---------------------
----------- - --
----------------
-
---------------------------------- ------------
--------------------------------- -----------
---------------------------------- ------------解释与指导
上述 JavaScript 代码中，我们首先定义了一些变量，包括对应于 HTML 元素的引用以及用于跟踪时间和计时器的值。接下来，我们定义了 updateDisplay 函数，该函数将计时器的值格式化为小时、分钟和秒，并将其显示在 HTML 中。
然后，我们定义了三个按钮事件处理程序：startTimer、stopTimer 和 resetTimer。startTimer 函数启动定时器并从当前时间开始跟踪一个已经流逝的时间。 stopTimer 函数停止定时器，而 resetTimer 函数重置所有变量以便重新开始计时。
最后，我们添加事件监听器以便在用户单击按钮时调用这些函数。
通过阅读本文和运行示例代码，你应该可以理解如何使用纯 JavaScript 创建一个简单的秒表。此外，本文章也给予一些关于样式设计及事件监听器的范例，建议在实际开发中也可以借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29423