我是编码新手。我将图像用作按钮。我想在单击和计时器启动时隐藏按钮。计时器结束后，我希望链接自动打开。（我在最后描述了另一个问题）
这是我现在正在使用的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秒时出现。
谢谢
作为一个小提示，请描述您的尝试有效和无效的条件。无论如何，您的倒数计时可能无效，因此让我们来研究一下。
第一个问题是，单击链接后，浏览器将立即跟随该链接，但您需要倒数计时。因此，我们必须防止这种情况的发生。的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中完成）。祝您学得更好！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句