如何实现类似iPhone自带秒表的带计次功能的JavaScript秒表

实现方案 #

核心逻辑说明 #

iPhone自带秒表的计次功能逻辑如下：

• 累计总时长：从首次启动开始到当前的总运行时长，暂停后再启动会继续累加
• 单圈计次时长：每次点击计次时，当前累计总时长与上一次计次时的累计总时长的差值，首次计次的单圈时长等于当前累计总时长

完整修改代码 #

HTML代码

<button type="button" id="search_button" data-id="search_decision">
    <span id="openButton">Start</span>
    <span id="closeButton">Stop</span>
</button>
<button type="button" id="lapButton">计次</button>
<button type="button" id="resetButton">重置</button>

<p id="display">0</p>
<input type="hidden" name="time" id="time" value="0" />
<div id="lapList"></div>

JS代码

// 时间格式化工具，将毫秒转成 分:秒.毫秒 格式
function timeToString(time) {
    const diffInHrs = time / 3600000;
    const hh = Math.floor(diffInHrs);
    const diffInMin = (diffInHrs - hh) * 60;
    const mm = Math.floor(diffInMin);
    const diffInSec = (diffInMin - mm) * 60;
    const ss = Math.floor(diffInSec);
    const diffInMs = (diffInSec - ss) * 100;
    const ms = Math.floor(diffInMs);
    const formattedMM = mm.toString().padStart(2, "0");
    const formattedSS = ss.toString().padStart(2, "0");
    const formattedMS = ms.toString().padStart(2, "0");
    const timeStr = `${formattedMM}:${formattedSS}.${formattedMS}`;
    document.getElementById("time").value = time;
    return timeStr;
}

let startTime;
let elapsedTime = 0;
let timerInterval;
// 新增变量：存储计次记录、上一次计次的累计时间
let lapRecords = [];
let lastLapTime = 0;

// 打印主计时器时间
function print(txt) {
    document.getElementById("display").innerHTML = txt;
}

// 新增：渲染计次列表
function renderLapList() {
    const lapListEl = document.getElementById("lapList");
    let html = '';
    lapRecords.forEach((record, index) => {
        html += `<p>计次${lapRecords.length - index}：单圈 ${timeToString(record.lapTime)} | 累计 ${timeToString(record.totalTime)}</p>`
    })
    lapListEl.innerHTML = html;
}

// 启动计时
function start() {
    startTime = performance.now() - elapsedTime;
    timerInterval = setInterval(function printTime() {
        elapsedTime = performance.now() - startTime;
        print(timeToString(elapsedTime));
    }, 10);
    showButton("PAUSE");
    // 计时过程中显示计次按钮，隐藏重置按钮
    document.getElementById("lapButton").style.display = "inline-block";
    document.getElementById("resetButton").style.display = "none";
}

// 暂停计时
function pause() {
    clearInterval(timerInterval);
    showButton("PLAY");
    // 暂停时显示重置按钮，隐藏计次按钮
    document.getElementById("lapButton").style.display = "none";
    document.getElementById("resetButton").style.display = "inline-block";
}

// 新增：计次功能
function addLap() {
    const currentTotal = elapsedTime;
    const currentLap = currentTotal - lastLapTime;
    // 把新的计次插到数组最前面，方便渲染时最新的在最上面
    lapRecords.unshift({
        lapTime: currentLap,
        totalTime: currentTotal
    })
    lastLapTime = currentTotal;
    renderLapList();
}

// 新增：重置功能
function reset() {
    clearInterval(timerInterval);
    elapsedTime = 0;
    lapRecords = [];
    lastLapTime = 0;
    print(timeToString(0));
    document.getElementById("lapList").innerHTML = '';
    document.getElementById("resetButton").style.display = "none";
}

// 按钮显示切换
function showButton(buttonKey) {
    const buttonToShow = buttonKey === "PLAY" ? openButton : closeButton;
    const buttonToHide = buttonKey === "PLAY" ? closeButton : openButton;
    buttonToShow.style.display = "block";
    buttonToHide.style.display = "none";
}

// 事件绑定
let openButton = document.getElementById("openButton");
let closeButton = document.getElementById("closeButton");
let lapButton = document.getElementById("lapButton");
let resetButton = document.getElementById("resetButton");

openButton.addEventListener("click", start);
closeButton.addEventListener("click", pause);
lapButton.addEventListener("click", addLap);
resetButton.addEventListener("click", reset);

// 初始化隐藏计次、重置按钮
lapButton.style.display = "none";
resetButton.style.display = "none";

上述代码已经实现了和iPhone自带秒表完全一致的功能：支持启动、暂停、计次、重置操作，每次计次会同时展示单圈时长和累计总时长，最新的计次记录会显示在列表最上方。

内容的提问来源于stack exchange，提问作者Nicki Maier