点击时隐藏按钮，启动计时器，倒计时结束后自动下载

Question

我对编码很陌生。我用图像作为我的按钮。我想隐藏按钮时，点击和计时器启动。当计时器完成时，我想要一个链接自动打开。(最后我还描述了一个问题)

下面是我现在使用的HTML和JAVASCRIPT

<div id="download_button">
      <a href="https://www.google.com">
        <img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" /></a>
    </div>
<center>
  <b>
    <span style="font-size: 30px;">
      <span id="countdown"></span>
    </span>
  </b>
</center>

和JAVASCRIPT

<script type="application/javascript">
document.getElementById("download_button").addEventListener("click", function(){
var timeleft = 5;

var downloadTimer = setInterval(function function1(){
document.getElementById("countdown").innerHTML = "Please wait "+ timeleft + " seconds";

timeleft -= 1;
if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "downloading..."
}
 }, 1000);

   console.log(countdown);
});

还有一个问题我想解决。当还有2秒的时候，“下载.”就会出现。我希望它出现在1秒的时候，而不是2秒。

谢谢

Answer 1

作为一个小提示，请描述什么对你的尝试是有效的，哪些不起作用。不管怎样，你的倒计时可能不起作用，所以让我们来看看。

第一个问题是，单击链接后，浏览器会立即跟踪它，但您需要倒计时。因此，我们必须防止这种情况发生。preventDefault()的Event方法可能会帮助您实现这一点。然后，您的事件侦听器将开始如下所示：

document.getElementById("download_button").addEventListener("click", function(event){
event.preventDefault()

现在我们需要隐藏图像。这可以通过将其display属性设置为none来完成，该属性可能如下所示：

document.querySelector('#download_button a img').style.display = "none";

倒计时结束后，您需要一种实际触发下载的方法。我们可以通过使用下面的代码来模拟单击，但这只会创建一个无限循环.

document.querySelector('#download_button a').click();

实际上，从JS直接触发导航要容易得多：

window.location.href = document.querySelector('#download_button a').href;

在这里，我们使用querySelector来选择正确的元素并编辑它。这是非常通用的，但如果你的按钮移动，你可能必须改变选择器。使用id会更稳定。

你的最后一个问题是下载..。阶段启动得太快了。这是一个典型的排序语句问题。在代码中，在检查timeleft是否为0之前，先减小它的值。如果你把这条线一直放在最后，你的问题就会解决。

我制作一个JSFiddle是为了向您展示这些东西是如何一起工作的。

最后，我想指出的是，不鼓励使用<center>和<b>之类的东西(应该用CSS来完成)。祝您学习顺利！

Answer 2

一些想法。

1. 倒计时有延迟。解决方案:在setInterval上方添加一条倒计时消息
2. 若要修复过早启动的DL，请将timeleft -1移至下一条消息的上方。
3. 若要防止标记默认行为，请添加e.preventDefault() (它要求将e传递给函数)
4. 使用$替换所有document.getElementBy查询(注意:这不是jQuery!)

​

const $ = document.querySelector.bind(document);
var timeleft = 5;
$("#download_button").addEventListener("click", function(e){
    e.preventDefault(); //prevent the default a navigation behavior
    $("#download_button").style.display = 'none';
    $("#countdown").innerHTML = "Please wait "+ timeleft + " seconds"; //for quick start
    var downloadTimer = setInterval(function function1(){
        timeleft -= 1; //moved this line up 1 to fix timing
        $("#countdown").innerHTML = "Please wait "+ timeleft + " seconds";
        if(timeleft <= 0){
            clearInterval(downloadTimer);
            $("#countdown").innerHTML = "downloading...";
            let dlRef = $("#download_button a").href;
            window.location.href = dlRef;
        }
    }, 1000);
});

<style>
    #countdown{font-size:30px;}
</style>

<div id="download_button">
    <a href="https://www.google.com"><img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" /></a>
</div>
<div id="countdown"></div>

​

此外，尽量不要与你的风格相吻合。内联样式如下所示：

<span style="color:red">This is red</span>

可以为样式使用样式标记，也可以使用外部文件：

<span class="fgRed">This is red</span>
<style>
    .fgRed{color: red;}
</style>