使用 Bootstrap 5 制作带毫秒的秒表

    该插件使用 Bootstrap 5 实现了一个带毫秒的响应式秒表。秒表显示小时、分钟、秒和毫秒。您可以使用 "开始/停止 "按钮启动和停止秒表，也可以使用 "重置 "按钮重置秒表。圆形框架和控件采用了 Bootstrap 风格，确保了设计的视觉效果和用户友好性。它是在各种场景中准确跟踪时间的有用工具。

如何使用 Bootstrap 5 创建带毫秒的秒表

1.首先，在 HTML 文件的 <head> 部分包含必要的 Bootstrap 和 Font Awesome CDN 链接。

  <!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome Icons -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

2.在 HTML 中，创建一个包含秒表所需元素的容器。

<div id="stopwatch-container">
        <!-- Outer frame containing the circular frame and stopwatch -->
        <div id="outer-frame">
            <div id="outer-circle">
                <div id="stopwatch">00:00:00:00:00:00:000</div>
            </div>
        </div>

        <!-- Controls for the stopwatch -->
        <div id="controls">
            <button class="btn btn-primary" onclick="startStop()">
                <i class="fas fa-play"></i> Start/Stop
            </button>
            <button class="btn btn-danger" onclick="reset()">
                <i class="fas fa-stop"></i> Reset
            </button>
        </div>
    </div>

3.添加所需的样式，使秒表具有视觉吸引力。根据自己的喜好自定义颜色、字体和大小。

4.现在，在关闭 body 标签前添加以下 CDN 链接，加载 Bootstrap 5 JS、Popper JS 和 jQuery：

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

5.最后，为秒表功能添加 JavaScript 代码。