嘿，这事儿不难！我给你一套纯前端的实现方案，不用硬编码任何数值，完全自动提取原表格的数据来计算统计值。

第一步：先整理你的HTML结构 #

假设你原歌曲表格的结构是这样的（给每个关键元素加个ID方便JS获取）：

<!-- 原歌曲信息表格 -->
<table id="songTable">
  <thead>
    <tr>
      <th>歌曲名</th>
      <th>艺术家</th>
      <th>时长</th>
      <th>专辑</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>晴天</td>
      <td>周杰伦</td>
      <td>4:29</td>
      <td>叶惠美</td>
    </tr>
    <tr>
      <td>告白气球</td>
      <td>周杰伦</td>
      <td>3:35</td>
      <td>周杰伦的床边故事</td>
    </tr>
    <!-- 剩下3首歌的行省略 -->
  </tbody>
</table>

<!-- 统计结果表格 -->
<h3>歌曲统计</h3>
<table id="statsTable">
  <tbody>
    <tr>
      <td>歌曲总数：</td>
      <td id="totalSongs">-</td>
    </tr>
    <tr>
      <td>艺术家总数：</td>
      <td id="totalArtists">-</td>
    </tr>
    <tr>
      <td>总播放时长：</td>
      <td id="totalDuration">-</td>
    </tr>
  </tbody>
</table>

第二步：用JavaScript实现自动计算 #

接下来写核心的JS逻辑，放在<script>标签里（或者外部JS文件），它会自动读取表格数据并计算：

// 页面加载完成后执行统计
document.addEventListener('DOMContentLoaded', calculateStats);

function calculateStats() {
  // 获取原表格的所有数据行（跳过表头）
  const songRows = document.querySelectorAll('#songTable tbody tr');
  
  // 1. 计算歌曲总数
  document.getElementById('totalSongs').textContent = songRows.length;

  // 2. 计算去重后的艺术家数量
  const artists = new Set();
  songRows.forEach(row => {
    const artist = row.cells[1].textContent.trim(); // 第2列是艺术家（索引从0开始）
    artists.add(artist);
  });
  document.getElementById('totalArtists').textContent = artists.size;

  // 3. 计算总时长（关键：自动解析mm:ss格式）
  let totalSeconds = 0;
  songRows.forEach(row => {
    const durationStr = row.cells[2].textContent.trim(); // 第3列是时长
    totalSeconds += parseDurationToSeconds(durationStr);
  });
  // 把总秒数转成mm:ss格式
  document.getElementById('totalDuration').textContent = formatSecondsToDuration(totalSeconds);
}

// 辅助函数：把"mm:ss"转成秒数
function parseDurationToSeconds(duration) {
  const [minutes, seconds] = duration.split(':').map(Number);
  return minutes * 60 + seconds;
}

// 辅助函数：把总秒数转成"mm:ss"格式（超过60分钟也能处理成hh:mm:ss哦）
function formatSecondsToDuration(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;

  // 如果有小时，就显示hh:mm:ss，否则显示mm:ss
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  }
}

为什么这么做？ #

• 歌曲总数：直接取表格数据行的数量，完全不需要硬编码，哪怕你以后加更多歌曲也自动更新。
• 艺术家数量：用Set自动去重，不管同一个艺术家出现多少次，只会算一次。
• 总时长：通过两个辅助函数解析和格式化时间，完全自动读取表格里的mm:ss格式时长，求和后再转成友好的时间格式，哪怕时长超过1小时也能正确显示。

如果以后你的歌曲表格内容是动态加载的（比如通过JS新增行），只要调用calculateStats()函数就能重新统计啦！

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