如何用JS高效实现多位置时间戳的已流逝时间展示？

核心思路 #

把时间戳计算逻辑封装成通用函数，通过数据驱动+批量遍历的方式处理16个数据点，彻底避免重复编写相同脚本。

实现步骤 #

1. 定义通用时间计算函数

先写一个可复用的函数，输入Unix时间戳（秒级），返回格式化后的已流逝时间：

function getElapsedTime(timestamp) {
  const now = Date.now() / 1000; // 转换为Unix时间戳（秒）
  const elapsed = now - timestamp;

  // 按需格式化时间单位，可根据需求调整精度（比如只保留小时+分钟）
  const days = Math.floor(elapsed / 86400);
  const hours = Math.floor((elapsed % 86400) / 3600);
  const minutes = Math.floor((elapsed % 3600) / 60);
  const seconds = Math.floor(elapsed % 60);

  return `${days}天${hours}时${minutes}分${seconds}秒`;
}

2. 绑定时间戳与DOM元素

有两种方式关联时间戳和展示位置，按需选择：

方式一：静态HTML绑定（适合提前知道时间戳的场景）

给每个展示位置的元素添加统一类名和data-timestamp属性，直接绑定对应时间戳：

<!-- 16个数据点的展示结构，重复即可 -->
<div>数据点1：已流逝 <span class="time-elapsed" data-timestamp="1620000000"></span></div>
<div>数据点2：已流逝 <span class="time-elapsed" data-timestamp="1630000000"></span></div>
<!-- ... 剩余14个数据点结构 -->

方式二：动态生成DOM（适合时间戳需动态获取的场景）

如果你的newStamp是逐个获取的，先收集所有时间戳到数组，再批量生成DOM元素：

// 收集16个时间戳（替换成你的实际获取逻辑，比如接口返回、本地计算）
const timestamps = [];
for (let i = 0; i < 16; i++) {
  const newStamp = /* 你的时间戳获取逻辑 */;
  timestamps.push(newStamp);
}

// 批量创建并添加元素到页面（假设页面有一个id为timestamps-container的容器）
const container = document.getElementById('timestamps-container');
timestamps.forEach((stamp, idx) => {
  const item = document.createElement('div');
  item.innerHTML = `数据点${idx + 1}：已流逝 <span class="time-elapsed" data-timestamp="${stamp}"></span>`;
  container.appendChild(item);
});

3. 批量更新所有展示内容

写一个批量更新函数，遍历所有带time-elapsed类的元素，调用计算函数更新内容，还可以加定时器实现实时刷新：

function updateAllTimes() {
  const timeElements = document.querySelectorAll('.time-elapsed');
  
  timeElements.forEach(el => {
    const stamp = parseFloat(el.dataset.timestamp);
    if (!isNaN(stamp)) {
      el.textContent = getElapsedTime(stamp);
    }
  });
}

// 页面加载时初始化一次
updateAllTimes();
// 每秒刷新一次（可根据需求调整间隔，比如5秒则写5000）
setInterval(updateAllTimes, 1000);

优势 #

• 仅需编写一次核心逻辑，无需重复复制16次脚本
• 时间戳与展示逻辑解耦，后续修改格式或新增数据点只需调整数组或HTML
• 支持实时刷新，保证时间显示的准确性

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