如何实现基于Class而非ID的倒计时计时器？修复指定下载倒计时代码

我来帮你搞定这个基于Class而非ID的倒计时计时器问题，先拆解下原代码里的几个关键问题，再给出完整的修复代码：

原代码的核心问题 #

• document.getElementsByClassName("button") 返回的是HTMLCollection（类数组对象），不是单个DOM元素，直接调用parentNode会报错，得取对应索引的元素（比如第一个元素用[0]）。
• 代码末尾的replaceChild(downloadButton, n...是拼写错误，应该是newElement。
• 倒计时结束后没有清除定时器，会导致不必要的内存消耗。
• 倒计时过程中没有实时更新提示文本，用户看不到剩余时间变化。

修复后的完整代码 #

HTML部分

<a href="downloadFile.zip" class="button">Download the file...</a>

JavaScript部分

// 获取类名为button的第一个元素（如果有多个按钮可以遍历处理）
const downloadButton = document.querySelector('.button');
let counter = 10;
const newElement = document.createElement('p');
let timerId;

// 初始提示文本
newElement.textContent = `You can download the file in ${counter} seconds.`;
// 替换按钮为倒计时提示
downloadButton.parentNode.replaceChild(newElement, downloadButton);

// 启动倒计时定时器
timerId = setInterval(() => {
  counter--;
  if (counter < 0) {
    // 倒计时结束，替换回下载按钮
    newElement.parentNode.replaceChild(downloadButton, newElement);
    // 清除定时器，避免内存泄漏
    clearInterval(timerId);
  } else {
    // 实时更新剩余时间文本
    newElement.textContent = `You can download the file in ${counter} seconds.`;
  }
}, 1000);

额外优化说明 #

如果页面上有多个带button类的下载按钮，可以用querySelectorAll遍历处理，确保每个按钮都有独立的倒计时：

const downloadButtons = document.querySelectorAll('.button');

downloadButtons.forEach(button => {
  let counter = 10;
  const newElement = document.createElement('p');
  let timerId;

  newElement.textContent = `You can download the file in ${counter} seconds.`;
  button.parentNode.replaceChild(newElement, button);

  timerId = setInterval(() => {
    counter--;
    if (counter < 0) {
      newElement.parentNode.replaceChild(button, newElement);
      clearInterval(timerId);
    } else {
      newElement.textContent = `You can download the file in ${counter} seconds.`;
    }
  }, 1000);
});

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