如何存储点击耗时并在页面展示最小秒数？

实现步骤与修改代码： #

1. 声明全局数组存储耗时记录
   在代码最外层定义一个数组，用来保存每次点击产生的耗时数据：

let timeRecords = [];

2. 修改点击逻辑，添加存储与最小值计算
   在现有点击事件代码中，加入存储耗时、计算最小耗时并展示的逻辑（假设你已在页面中添加了一个id="minTime"的元素，用于显示最小耗时）：

修改后的完整代码：

// 全局数组存储所有点击耗时
let timeRecords = [];

document.getElementById("shape").onclick = function(){
    document.getElementById("shape").style.display = "none";
    
    var end = new Date().getTime();
    var netTime = ((end - start)/1000);

    // 将本次耗时存入数组
    timeRecords.push(netTime);
    // 计算当前所有记录中的最小耗时
    let minTime = Math.min(...timeRecords);

    // 展示本次耗时
    document.getElementById("zamanim").innerHTML = netTime + " sn.";
    // 展示最小耗时（保留两位小数优化显示）
    document.getElementById("minTime").innerHTML = "最小耗时: " + minTime.toFixed(2) + " sn.";
        
    appearAfterDelay();
}

关键说明： #

• timeRecords.push(netTime)：把每次计算出的耗时追加到数组，完成存储功能
• Math.min(...timeRecords)：通过扩展运算符展开数组，快速获取数组中的最小值
• .toFixed(2)：可选操作，用于将小数位数限制为2位，让显示更整洁
• 需确保start变量是在shape元素出现时被正确初始化的（比如在appearAfterDelay函数内设置start = new Date().getTime()）
• 页面需添加展示最小耗时的元素，示例：

<div id="minTime"></div>

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