当前位置：首页 > JavaScript

js实现秒表盘

2026-04-07 12:44:03JavaScript

实现秒表盘的基本思路

使用HTML、CSS和JavaScript创建一个秒表盘，需要定义显示区域、控制按钮和计时逻辑。秒表功能包括开始、暂停、继续和重置。

HTML结构

创建基本的HTML结构，包含显示区域和控制按钮：

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

CSS样式

为秒表盘添加基本样式，使其视觉上更清晰：

.stopwatch {
    text-align: center;
    margin: 50px auto;
    font-family: Arial, sans-serif;
}

.display {
    font-size: 48px;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript逻辑

实现秒表的计时和控制功能：

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

let startTime;
let elapsedTime = 0;
let timerInterval;

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');
    return `${hours}:${minutes}:${seconds}`;
}

function updateDisplay() {
    display.textContent = formatTime(elapsedTime);
}

startBtn.addEventListener('click', () => {
    if (!timerInterval) {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(() => {
            elapsedTime = Date.now() - startTime;
            updateDisplay();
        }, 10);
    }
});

pauseBtn.addEventListener('click', () => {
    clearInterval(timerInterval);
    timerInterval = null;
});

resetBtn.addEventListener('click', () => {
    clearInterval(timerInterval);
    timerInterval = null;
    elapsedTime = 0;
    updateDisplay();
});

功能扩展

添加毫秒显示以提高精度：

js实现秒表盘

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}.${milliseconds}`;
}