用js实现秒表

实现秒表功能

使用JavaScript实现秒表功能可以通过以下步骤完成。秒表需要具备开始、暂停、重置功能，并显示时、分、秒和毫秒。

HTML结构

创建一个简单的HTML结构，包含显示区域和控制按钮：

<div id="stopwatch">
    <div id="display">00:00:00:000</div>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="reset">重置</button>
</div>

CSS样式

为秒表添加基本样式：

#stopwatch {
    text-align: center;
    font-family: Arial, sans-serif;
}
#display {
    font-size: 2em;
    margin: 20px;
}
button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 1em;
}

JavaScript逻辑

实现秒表的核心功能：

let startTime;
let elapsedTime = 0;
let timerInterval;
const display = document.getElementById('display');
const startButton = document.getElementById('start');
const pauseButton = document.getElementById('pause');
const resetButton = document.getElementById('reset');

function formatTime(time) {
    let hours = Math.floor(time / 3600000);
    let minutes = Math.floor((time % 3600000) / 60000);
    let seconds = Math.floor((time % 60000) / 1000);
    let milliseconds = Math.floor(time % 1000);

    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(3, '0')}`;
}

function startTimer() {
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(function() {
        elapsedTime = Date.now() - startTime;
        display.textContent = formatTime(elapsedTime);
    }, 10);
    startButton.disabled = true;
    pauseButton.disabled = false;
}

function pauseTimer() {
    clearInterval(timerInterval);
    startButton.disabled = false;
    pauseButton.disabled = true;
}

function resetTimer() {
    clearInterval(timerInterval);
    elapsedTime = 0;
    display.textContent = '00:00:00:000';
    startButton.disabled = false;
    pauseButton.disabled = false;
}

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

// 初始状态
pauseButton.disabled = true;

功能说明

• formatTime函数将毫秒转换为格式化的时间字符串（HH:MM:SS:MS）
• startTimer函数记录开始时间并启动定时器，每10毫秒更新显示
• pauseTimer函数停止定时器，保留当前时间
• resetTimer函数重置所有状态，恢复初始显示

注意事项

• 定时器间隔设置为10毫秒以获得更流畅的毫秒显示
• 使用padStart方法确保时间数字始终显示两位数
• 按钮状态管理确保操作逻辑正确（如开始后禁用开始按钮）

这个实现提供了基本的秒表功能，可以根据需要扩展更多特性如计次功能、更精确的时间显示等。