4

我在下载前有几秒钟计时器的下载按钮，但不幸的是，它只适用于第一个按钮，但不适用于其他按钮。我希望它在每个下载按钮上都能正常工作，但我无法弄清楚如何解决这个问题。请帮忙！

我附上了我一直在使用的 CSS、HTML 和 JavaScript。

document.getElementById("download_button").addEventListener("click", function(event) {
  event.preventDefault();
  var timeleft = 3;

  var downloadTimer = setInterval(function function1() {
    document.getElementById('download').style.display = "none";
    document.getElementById("timer").innerHTML = "Wait " + timeleft + "";

    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      document.getElementById("timer").innerHTML = ""
      window.open(document.querySelector('#downloadbutton a').href, '_blank');
      document.getElementById('download').style.display = "";
    }
    timeleft -= 1;
  }, 1000);
});
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#download_button {
  border: none;
  margin-top: 0px;
  padding: 10px;
  width: 200px;
  font-family: "montserrat", sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: 0.4s;
  line-height: 28px;
  outline: none;
}

.button-1 {
  background: #f12711;
}

.button-2 {
  background: #0575E6;
}

.button-3 {
  background: #fe8c00;
}

#download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
}
<div id="downloadbutton" style="text-align: center;">
  <a href="http:///www.google.com">
    <button id="download_button" class="button-1">
          <div class="title">Document Title 1</div>
          <div id="download">DOWNLOAD</div>
          <div id="timer"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton" style="text-align: center;">
  <a href="http:///www.google.com">
    <button id="download_button" class="button-2">
          <div class="title">Document Title 2</div>
          <div id="download">DOWNLOAD</div>
          <div id="timer"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton" style="text-align: center;">
  <a href="http:///www.google.com">
    <button id="download_button" class="button-3">
          <div class="title">Document Title 3</div>
          <div id="download">DOWNLOAD</div>
          <div id="timer"></div>
        </button>
  </a>
</div>

4

2 回答 2

2

使用不同 ID 的简单解决方案

function download(btn) {

  id = Number(btn.id.slice("downloadbutton".length+1))

  var timeleft = 3;

  var downloadTimer = setInterval(function function1() {
    document.getElementById('download' + id).style.display = "none";
    document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";

    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      document.getElementById("timer" + id).innerHTML = ""
      //window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');
      document.getElementById('download' + id).style.display = "";
    }
    timeleft -= 1;
  }, 1000);
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#download_button {
  border: none;
  margin-top: 0px;
  padding: 10px;
  width: 200px;
  font-family: "montserrat", sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: 0.4s;
  line-height: 28px;
  outline: none;
}

.button-1 {
  background: #f12711;
}

.button-2 {
  background: #0575E6;
}

.button-3 {
  background: #fe8c00;
}

#download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
}
<div id="downloadbutton1" style="text-align: center;">
    <button id="download_button1" class="button-1" onclick="download(this)">
              <div class="title">Document Title 1</div>
              <div id="download1">DOWNLOAD</div>
              <div id="timer1"></div>
            </button>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
    <button id="download_button2" class="button-2" onclick="download(this)">
              <div class="title">Document Title 2</div>
              <div id="download2">DOWNLOAD</div>
              <div id="timer2"></div>
            </button>
</div>
<br>
<div id="downloadbutton3" style="text-align: center;">
    <button id="download_button3" class="button-3" onclick="download(this)">
              <div class="title">Document Title 3</div>
              <div id="download3">DOWNLOAD</div>
              <div id="timer3"></div>
            </button>
</div>

于 2020-12-23T06:18:10.097 回答
1

您缺少 html 的基本规则，

两者之间的简单区别在于，虽然一个类可以在一个页面上重复使用，但一个 ID 每页只能使用一次。因此，在标记页面主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相反，您必须使用一个类来设置表格上的交替行颜色，因为根据定义它们将被多次使用......

资料来源：一个ID和一个类之间的区别是什么

您可以使用类，也可以使用不同的 id，或者根据要求同时使用两者。

我已经download_button从idto更改class并添加EventListener了循环，使用类的原因是您EventListener向所有按钮添加相同的内容。

然后我使用了不同但相同的 Id download，downloadbutton并且timer因为您的函数需要单独选择它们，所以我使用带有 Id 的数字，因为使用项目的索引很容易选择。

document.querySelectorAll(".download_button").forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 3;

    var downloadTimer = setInterval(function function1() {
      document.getElementById('download_' + index).style.display = "none";
      document.getElementById("timer_" + index).innerHTML = "Wait " + timeleft + "";

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer_" + index).innerHTML = ""
        window.open(document.querySelector('#downloadbutton' + index + ' a').href, '_blank');
        document.getElementById('download_' + index).style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.download_button {
  border: none;
  margin-top: 0px;
  padding: 10px;
  width: 200px;
  font-family: "montserrat", sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: 0.4s;
  line-height: 28px;
  outline: none;
}

.button-1 {
  background: #f12711;
}

.button-2 {
  background: #0575E6;
}

.button-3 {
  background: #fe8c00;
}

.download_button:hover {
  background: #000000;
}

.title {
  font-weight: bold;
}
<div id="downloadbutton0" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-1">
          <div class="title">Document Title 1</div>
          <div id="download_0">DOWNLOAD</div>
          <div id="timer_0"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton1" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-2">
          <div class="title">Document Title 2</div>
          <div id="download_1">DOWNLOAD</div>
          <div id="timer_1"></div>
        </button>
  </a>
</div>
<br>
<div id="downloadbutton2" style="text-align: center;">
  <a href="http:///www.google.com">
    <button class="download_button button-3">
          <div class="title">Document Title 3</div>
          <div id="download_2">DOWNLOAD</div>
          <div id="timer_2"></div>
        </button>
  </a>
</div>

于 2020-12-23T06:13:34.333 回答