js怎么做一个秒表

要创建一个秒表的核心步骤包括：初始化时间、开始计时、暂停、重置等功能。通过JavaScript，我们可以轻松实现这些功能。接下来，我们将详细介绍如何用JavaScript实现一个功能齐全的秒表。

1、初始化时间

在创建秒表时，首先需要初始化时间变量。我们可以使用Date对象来获取当前时间，并将其存储在变量中，以便后续计算时间间隔。

let startTime;
let updatedTime;
let difference;
let tInterval;
let running = false;

2、开始计时

为了开始计时，我们需要一个函数来记录开始时间，并使用setInterval函数每隔一段时间更新秒表显示。以下是一个简单的实现：

function startTimer() {
    if (!running) {
        startTime = new Date().getTime();
        tInterval = setInterval(getShowTime, 1); // update display every 1ms
        running = true;
    }
}
function getShowTime() {
    updatedTime = new Date().getTime();
    difference = updatedTime - startTime;
    let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((difference % (1000 * 60)) / 1000);
    let milliseconds = Math.floor((difference % 1000) / 10);
    document.getElementById('display').innerHTML = 
        (hours < 10 ? "0" + hours : hours) + ":" + 
        (minutes < 10 ? "0" + minutes : minutes) + ":" + 
        (seconds < 10 ? "0" + seconds : seconds) + ":" + 
        (milliseconds < 10 ? "0" + milliseconds : milliseconds);
}

3、暂停计时

暂停计时功能是通过clearInterval函数来实现的，这将停止setInterval的执行。

function pauseTimer() {
    if (running) {
        clearInterval(tInterval);
        running = false;
    }
}

4、重置计时

重置计时功能将所有变量恢复到初始状态，并更新显示。

function resetTimer() {
    clearInterval(tInterval);
    running = false;
    difference = 0;
    document.getElementById('display').innerHTML = "00:00:00:00";
}

5、绑定按钮事件

为了用户能够操作秒表，我们需要将这些功能绑定到按钮上。

<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>
<div id="display">00:00:00:00</div>

document.getElementById('startButton').addEventListener('click', startTimer);
document.getElementById('pauseButton').addEventListener('click', pauseTimer);
document.getElementById('resetButton').addEventListener('click', resetTimer);

一、初始化时间

初始化时间是秒表的基础，它确保了我们可以准确地计算经过的时间。通过Date对象获取当前时间，并将其存储在变量中，以便后续计算。

let startTime;
let updatedTime;
let difference;
let tInterval;
let running = false;

二、开始计时

开始计时功能是秒表的核心，它通过setInterval函数每隔一段时间更新显示。以下是一个简单的实现：

function startTimer() {
    if (!running) {
        startTime = new Date().getTime();
        tInterval = setInterval(getShowTime, 1); // update display every 1ms
        running = true;
    }
}
function getShowTime() {
    updatedTime = new Date().getTime();
    difference = updatedTime - startTime;
    let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((difference % (1000 * 60)) / 1000);
    let milliseconds = Math.floor((difference % 1000) / 10);
    document.getElementById('display').innerHTML = 
        (hours < 10 ? "0" + hours : hours) + ":" + 
        (minutes < 10 ? "0" + minutes : minutes) + ":" + 
        (seconds < 10 ? "0" + seconds : seconds) + ":" + 
        (milliseconds < 10 ? "0" + milliseconds : milliseconds);
}

三、暂停计时

暂停计时通过clearInterval函数来实现，它将停止setInterval的执行。

function pauseTimer() {
    if (running) {
        clearInterval(tInterval);
        running = false;
    }
}

四、重置计时