原生js 秒表实现代码

下面是一个简单的原生 JavaScript 秒表示例代码。这个秒表具有开始、停止和重置功能。HTML 部分包含了必要的按钮和显示时间的元素。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单秒表</title>
</head>
<body>
    <h1>简单秒表</h1>
    <button id="startBtn">开始</button>
    <button id="stopBtn">停止</button>
    <button id="resetBtn">重置</button>
    <p>时间: <span id="timerDisplay">00:00:00</span></p>

    <script src="stopwatch.js"></script>
</body>
</html>

JavaScript (`stopwatch.js`):


let startTime = null;
let elapsedTime = 0;
let timerId = null;

function updateTimerDisplay() {
    const milliseconds = Math.floor((elapsedTime % 1000) / 10);
    const seconds = Math.floor((elapsedTime / 1000) % 60);
    const minutes = Math.floor((elapsedTime / (1000 * 60)) % 60);
    const hours = Math.floor(elapsedTime / (1000 * 60 * 60));

    document.getElementById('timerDisplay').textContent =
        (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" +
        (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" +
        (seconds > 9 ? seconds : "0" + seconds) + "." + (milliseconds > 9 ? milliseconds : "0" + milliseconds);
}

function startTimer() {
    if (startTime === null) {
        startTime = Date.now() - elapsedTime;
    }
    timerId = setInterval(function() {
        elapsedTime = Date.now() - startTime;
        updateTimerDisplay();
    }, 10); // 更新频率10毫秒
}

function stopTimer() {
    if (timerId !== null) {
        clearInterval(timerId);
        timerId = null;
    }
}

function resetTimer() {
    stopTimer();
    startTime = null;
    elapsedTime = 0;
    updateTimerDisplay();
}

document.getElementById('startBtn').addEventListener('click', startTimer);
document.getElementById('stopBtn').addEventListener('click', stopTimer);
document.getElementById('resetBtn').addEventListener('click', resetTimer);

这段代码实现了秒表的基本功能。HTML 部分提供了三个按钮用于控制秒表，以及一个用于显示时间的段落。JavaScript 部分定义了开始、停止和重置秒表的功能，并通过 `setInterval` 方法来更新显示的时间。