Javascript 隐藏下载链接10秒？js

嘿，我怎么能把我的下载链接隐藏起来，然后倒计时呢。也许从10开始倒计时，一旦完成，下载链接就会出现，最好用js来完成，对吗

有人知道怎么做吗D

谢谢

看看这个函数。您可以执行以下操作：

function displayLink() {
  document.getElementById('link_id').style.display = 'block';
}

setTimeout(displayLink, 10000);

看看这个函数。您可以执行以下操作：

function displayLink() {
  document.getElementById('link_id').style.display = 'block';
}

setTimeout(displayLink, 10000);

---

您可以使用setInterval进行此操作。setInterval的行为类似于计时器，您可以在其中定期运行某个函数。类似这样的操作应该可以完成未经测试的工作：

$(".link").hide();

var iteration = 0;
var timer = setInterval(function() {
    if(iteration++ >= 10) {
        clearTimeout(timer);
        $(".link").show();
        $(".counter").hide();
    }

    $(".counter").text(10 - iteration);
}, 1000);

这将首先隐藏下载链接，并每秒运行一个从10开始倒计时的函数。当我们到达10时，我们隐藏计数器并显示链接。ClearTimeout被使用，这样我们就不会在到达10后计数。像戴尔一样容易

---

编辑：如注释中所述，此函数使用jQuery查找元素。

您可以使用setInterval进行此操作。setInterval的行为类似于计时器，您可以在其中定期运行某个函数。类似这样的操作应该可以完成未经测试的工作：

$(".link").hide();

var iteration = 0;
var timer = setInterval(function() {
    if(iteration++ >= 10) {
        clearTimeout(timer);
        $(".link").show();
        $(".counter").hide();
    }

    $(".counter").text(10 - iteration);
}, 1000);

这将首先隐藏下载链接，并每秒运行一个从10开始倒计时的函数。当我们到达10时，我们隐藏计数器并显示链接。ClearTimeout被使用，这样我们就不会在到达10后计数。像戴尔一样容易

编辑：如注释中所述，此函数使用jQuery查找元素。

完整示例：

<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 10;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script>

完整示例：

<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 10;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script>

---

Ryan Mitchell的回答是正确的，但是如果您在服务器端10秒钟内没有保护链接，您的下载保护将非常容易绕过。Ryan Mitchell的回答是正确的，但是如果您在服务器端10秒钟内没有保护链接，您的下载保护将非常容易绕过。