当前位置：首页 > JavaScript

用js实现秒表

2026-02-02 23:25:26JavaScript

使用JavaScript实现秒表

以下是一个简单的秒表实现，包含开始、暂停和重置功能。代码使用HTML和JavaScript结合，通过DOM操作更新显示。

HTML结构

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

JavaScript实现

let timer;
let hours = 0;
let minutes = 0;
let seconds = 0;
let isRunning = false;

const display = document.getElementById('display');
const startBtn = document.getElementById('start');
const pauseBtn = document.getElementById('pause');
const resetBtn = document.getElementById('reset');

function updateDisplay() {
    display.textContent = 
        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function incrementTime() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
    }
    if (minutes >= 60) {
        minutes = 0;
        hours++;
    }
    updateDisplay();
}

startBtn.addEventListener('click', () => {
    if (!isRunning) {
        timer = setInterval(incrementTime, 1000);
        isRunning = true;
    }
});

pauseBtn.addEventListener('click', () => {
    clearInterval(timer);
    isRunning = false;
});

resetBtn.addEventListener('click', () => {
    clearInterval(timer);
    hours = 0;
    minutes = 0;
    seconds = 0;
    updateDisplay();
    isRunning = false;
});

功能说明

开始按钮：启动计时器，每秒更新一次显示。
暂停按钮：停止计时器，保留当前时间。
重置按钮：停止计时器并将时间重置为00:00:00。

样式增强（可选）

可以添加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;
    cursor: pointer;
}

扩展功能

如果需要更精确的计时（如毫秒），可以修改incrementTime函数和显示格式：

用js实现秒表

let milliseconds = 0;

function updateDisplay() {
    display.textContent = 
        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
}

function incrementTime() {
    milliseconds += 10;
    if (milliseconds >= 1000) {
        milliseconds = 0;
        seconds++;
    }
    // 其余逻辑不变
    updateDisplay();
}

// 将setInterval时间改为10ms
timer = setInterval(incrementTime, 10);