当前位置：首页 > JavaScript

用js实现秒表

2026-04-07 17:14:51JavaScript

使用JavaScript实现秒表

以下是使用JavaScript实现秒表功能的完整代码示例，包含开始、暂停、重置功能。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript秒表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .stopwatch {
            text-align: center;
        }
        .display {
            font-size: 3em;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            font-size: 1em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="stopwatch">
        <div class="display">00:00:00</div>
        <button id="startBtn">开始</button>
        <button id="pauseBtn">暂停</button>
        <button id="resetBtn">重置</button>
    </div>
    <script src="stopwatch.js"></script>
</body>
</html>

JavaScript实现

// 获取DOM元素
const display = document.querySelector('.display');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

// 初始化变量
let startTime;
let elapsedTime = 0;
let timerInterval;
let isRunning = false;

// 格式化时间显示
function formatTime(ms) {
    let date = new Date(ms);
    let hours = date.getUTCHours().toString().padStart(2, '0');
    let minutes = date.getUTCMinutes().toString().padStart(2, '0');
    let seconds = date.getUTCSeconds().toString().padStart(2, '0');
    let milliseconds = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0');

    return `${hours}:${minutes}:${seconds}`;
    // 如果需要显示毫秒，使用下面这行
    // return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

// 更新显示
function updateDisplay() {
    display.textContent = formatTime(elapsedTime);
}

// 开始计时
function startTimer() {
    if (!isRunning) {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(function() {
            elapsedTime = Date.now() - startTime;
            updateDisplay();
        }, 10);
        isRunning = true;
    }
}

// 暂停计时
function pauseTimer() {
    if (isRunning) {
        clearInterval(timerInterval);
        isRunning = false;
    }
}

// 重置计时器
function resetTimer() {
    pauseTimer();
    elapsedTime = 0;
    updateDisplay();
}

// 添加事件监听
startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

// 初始化显示
updateDisplay();