当前位置：首页 > JavaScript

怎么实现秒表js

2026-02-02 22:25:26JavaScript

实现秒表的JavaScript代码

以下是一个简单的秒表实现，包含开始、暂停、重置功能：

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

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

// 格式化时间为HH:MM:SS
function formatTime(time) {
    const date = new Date(time);
    const hours = date.getUTCHours().toString().padStart(2, '0');
    const minutes = date.getUTCMinutes().toString().padStart(2, '0');
    const seconds = date.getUTCSeconds().toString().padStart(2, '0');
    const milliseconds = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0');
    return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

// 开始计时
function startTimer() {
    if (!running) {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(() => {
            elapsedTime = Date.now() - startTime;
            display.textContent = formatTime(elapsedTime);
        }, 10);
        running = true;
    }
}

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

// 重置计时
function resetTimer() {
    clearInterval(timerInterval);
    running = false;
    elapsedTime = 0;
    display.textContent = '00:00:00.00';
}

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

HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>秒表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #display {
            font-size: 48px;
            margin-bottom: 20px;
        }
        button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="display">00:00:00.00</div>
    <button id="startBtn">开始</button>
    <button id="pauseBtn">暂停</button>
    <button id="resetBtn">重置</button>
    <script src="stopwatch.js"></script>
</body>
</html>