求助：实现HTML表格多单元格独立倒计时计时器功能

嘿，我明白你的需求啦！原来的代码只能给单个ID的元素做倒计时，要扩展到多个单元格其实很简单，咱们只需要把倒计时逻辑改成可复用的，再给每个需要倒计时的单元格标记好目标日期就行。下面是具体的修改方案和完整代码：

核心思路 #

• 给每个需要倒计时的右列单元格添加自定义属性data-countdown-date，把目标日期写在这个属性里（比如data-countdown-date="Dec 10, 2020 21:41:25"），让JS能直接读取每个单元格的目标时间
• 把原来的倒计时代码封装成独立函数，接收目标日期和要渲染的DOM元素作为参数，确保每个单元格的倒计时独立运行、互不干扰
• 页面加载完成后，遍历所有带data-countdown-date属性的单元格，逐个初始化倒计时

完整代码示例 #

HTML + JavaScript 代码 #

<html>
<head>
</head>
<body>
<table style="width:600px">
  <tr>
    <th>TEXT</th>
    <th>COUNTDOWN</th>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <!-- 自定义属性存储该单元格的目标日期 -->
    <td data-countdown-date="Dec 10, 2025 21:41:25"></td>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <td data-countdown-date="Jan 1, 2025 00:00:00"></td>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <td data-countdown-date="Jun 15, 2025 12:00:00"></td>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <td data-countdown-date="Mar 8, 2025 08:30:00"></td>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <td data-countdown-date="Jul 20, 2025 18:00:00"></td>
  </tr>
  <tr>
    <td><a href="www.google.com">TBA</a></td>
    <td data-countdown-date="Sep 30, 2025 23:59:59"></td>
  </tr>
</table>

<script>
// 封装通用倒计时函数：接收目标日期字符串和渲染元素
function initCountdown(targetDateStr, element) {
    var countDownDate = new Date(targetDateStr).getTime();
    
    // 每秒更新一次倒计时
    var timer = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        
        // 计算天、时、分、秒
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // 渲染倒计时内容
        element.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s `;
        
        // 倒计时结束时停止计时器并更新文本
        if (distance < 0) {
            clearInterval(timer);
            element.innerHTML = "DROPPED";
        }
    }, 1000);
}

// 页面DOM加载完成后，初始化所有倒计时单元格
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带自定义属性的倒计时单元格
    var countdownCells = document.querySelectorAll('[data-countdown-date]');
    
    // 遍历每个单元格，独立初始化倒计时
    countdownCells.forEach(function(cell) {
        var targetDate = cell.getAttribute('data-countdown-date');
        initCountdown(targetDate, cell);
    });
});
</script>
</body>
</html>

关键细节说明 #

1. 自定义属性data-countdown-date：这是HTML5标准的自定义数据属性，专门用来存储元素的自定义数据，比用ID或类标记更清晰，每个单元格的目标日期都独立存储。
2. 封装initCountdown函数：把原来的单例倒计时逻辑改成通用函数，每个单元格调用时都会创建独立的计时器，避免相互干扰。
3. DOMContentLoaded事件：确保页面所有DOM元素加载完成后再初始化倒计时，防止出现找不到元素的错误。
4. querySelectorAll遍历：一次性获取所有需要倒计时的单元格，批量处理，不用手动给每个单元格添加唯一ID。

现在你只需要在右列单元格的data-countdown-date属性中填入目标日期，JS就会自动为每个单元格生成独立的倒计时啦~

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