在HTML的Blogspot出现下载按钮链接之前，如何进行10秒倒计时？

如何解决在HTML的Blogspot出现下载按钮链接之前，如何进行10秒倒计时？

在下载页面上，我希望拥有它，以便在加载页面时自动启动10秒计时器。在页面上，我想说些类似“您可以在10秒钟内开始下载...”这样的文字，然后，时间到了，就会出现一个下载按钮，供人们单击以开始下载。

我该怎么做？如何使用什么代码将其包含到页面中？

解决方法

下载部分本身必须由服务器来处理，但是假设您具有文件的直接URL，则可以将其设置为带有下载属性的标签，然后使用setTimeout来进行倒计时。第二次设置时间，每次增加一个变量，如果变量大于9，则调用标记上的.click（）进行下载

假设页面上已经有“我的计数器”的Div，

var a=document. createElement ("a")
a.href="direct URL of file goes here"
a.download="file name plus the extension.txt"

var currentSecond=0
function second () {
   setTimeout(function () {
        currentSecond++
        counter. innerHTML= (10-currentSecond)+" seconds to go before download starts automatically"
        if(currentSecond > 9)
            a.click()
         else second ()
    },1000)
}

second ()

类似这样的东西

   <div>
      <div id="countdown"></div>
      <a href="file" id="download" style="display: none"><button type="button">Download</button></a>
   </div>

   <script type="text/javascript">
     var time = 10;
     var interval = setInterval(() => {
        time--;
        if (time <= 0) {
          document.getElementById("countdown").style.display = "none";
          document.getElementById("download").style.display = "block";
          clearInterval(interval);
        } else {
          document.getElementById("countdown").innerText = "You can begin your download in" + time +  "seconds..."
        }
     },1000);

   </script>

Ciao，您可以使用setInterval，然后在时间到期时显示如下按钮：

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<input id="button" type="button" onclick="location.href='https://google.com';" value="DOWNLOAD" />

<script>
// Set the date we're counting down to
var countDownDate = new Date().setSeconds(new Date().getSeconds() + 10);
document.getElementById("button").style.visibility = "hidden";

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = "You can begin your download in " + seconds +" seconds...";
    
  // If the count down is over,write some text and show button to download
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Click DOWNLOAD button";
    document.getElementById("button").style.visibility = "visible";
  }
},1000);

function startDownload() {
   // here start the download
}
</script>

</body>
</html>

在HTML的Blogspot出现下载按钮链接之前，如何进行10秒倒计时？

如何解决在HTML的Blogspot出现下载按钮链接之前，如何进行10秒倒计时？

解决方法

相关推荐