如何在下载按钮链接出现之前设置 10 秒倒计时？答案

【问题标题】：How can I make a 10 second countdown timer before a download button link appears?如何在下载按钮链接出现之前设置 10 秒倒计时？
【发布时间】：2011-05-26 23:56:24
【问题描述】：

在下载页面上，我希望它在页面加载时自动启动 10 秒计时器。在页面上，我想写一些文字，比如“您可以在 10 秒内开始下载......”然后，在时间结束后，会出现一个下载按钮，供人们点击并开始下载。

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

【问题讨论】：

@Marty Wallace：我想是 MegaUpload 之类的。
我要监控和防止盗链。另外，有些文件会很大，所以我希望人们在下载文件之前等待......所以它不会影响我的服务器。
这个问题肯定已经回答过了。
本来可以的，但是我到处找，什么也没找到。

标签： javascript timer download countdown

【解决方案1】：

见：http://jsfiddle.net/rATW7/

它是向后兼容的，但不是很安全，但无论如何 10 秒也没什么好担心的。

【讨论】：

@Omar 任何人都可以检查源代码并获得下载链接，而无需等待 10 秒。
你真的是13 minitech吗？赞你的编码技能 (+1) 这么年轻，你会走得很远 :)
@Omar：如果你真的希望它是安全的，你也必须实现服务器端验证，而这只是浪费了 10 秒等待 IMO 的努力。对于没有 JavaScript 浏览的人来说，它也不直观。幸运的是，实际上修改和绕过脚本需要花费超过 10 秒的时间，所以无论如何都没关系。
好的，谢谢大家的帮助。谢谢。你们都说服我不要将其包含在我的网站中。我认为这将是一个很好的补充......猜不是哈哈！ :P
好吧，唯一真正的问题是，如果没有服务器端验证，有人可能会创建类似油脂猴脚本的东西，从而绕过它进行您网站上的所有下载。所以除非你有大量的 DL，否则这不是一个真正的问题。

【解决方案2】：

您可以使用setInterval() 来执行此操作。

请注意，确保countdownElement 有一个现有的文本节点，可以是任何空格。如果不能保证，请使用innerHTML 或innerText/textContent。

window.onload = function() {
    var countdownElement = document.getElementById('countdown'),
        downloadButton = document.getElementById('download'),
        seconds = 10,
        second = 0,
        interval;

    downloadButton.style.display = 'none';

    interval = setInterval(function() {
        countdownElement.firstChild.data = 'You can start your download in ' + (seconds - second) + ' seconds';
        if (second >= seconds) {
            downloadButton.style.display = 'block';
            clearInterval(interval);
        }

        second++;
    }, 1000);
}

jsFiddle.

【讨论】：

我对php不太熟悉，所以我不确定你所说的倒计时元素是什么意思。
@Omar 小提琴可能更容易理解。我的答案中没有 PHP。

【解决方案3】：

没有人可以确保您的时间间隔是准确的，尤其是在选项卡（或浏览器）处于非活动状态时（参见例如this post），因此最好依靠时差而不是计数器：

var sTime = new Date().getTime();
var countDown = 30;

function UpdateTime() {
    var cTime = new Date().getTime();
    var diff = cTime - sTime;
    var seconds = countDown - Math.floor(diff / 1000);
    //show seconds
}
UpdateTime();
var counter = setInterval(UpdateTime, 500);

working fiddle

【讨论】：

我提供了一个替代答案，它是您的 Fiddle 解决方案的修改，它不使用 JQuery 并且可以使用几个小时。

【解决方案4】：

Yuriy 提供的对 Fiddle 的修改，它不使用 JQuery，如果秒数足够大，也可以使用小时。

<div id="countdowntimertxt" class="countdowntimer">00:00:00</div>

    <script type="text/javascript">
    var sTime = new Date().getTime();
    var countDown = 3700; // Number of seconds to count down from.        

    function UpdateCountDownTime() {
        var cTime = new Date().getTime();
        var diff = cTime - sTime;
        var timeStr = '';
        var seconds = countDown - Math.floor(diff / 1000);
        if (seconds >= 0) {
            var hours = Math.floor(seconds / 3600);
            var minutes = Math.floor( (seconds-(hours*3600)) / 60);
            seconds -= (hours*3600) + (minutes*60);
            if( hours < 10 ){
                timeStr = "0" + hours;
            }else{
                timeStr = hours;
            }
            if( minutes < 10 ){
                timeStr = timeStr + ":0" + minutes;
            }else{
                timeStr = timeStr + ":" + minutes;
            }
            if( seconds < 10){
                timeStr = timeStr + ":0" + seconds;
            }else{
                timeStr = timeStr + ":" + seconds;
            }
            document.getElementById("countdowntimertxt").innerHTML = timeStr;
        }else{
            document.getElementById("countdowntimertxt").style.display="none";
            clearInterval(counter);
        }
    }
    UpdateCountDownTime();
    var counter = setInterval(UpdateCountDownTime, 500);
    </script>

【讨论】：

【解决方案5】：

我正在用代码写回复，但亚历克斯的回复比我的快速而肮脏的解决方案要好。

考虑到如果你想做像 Rapidshare 和其他人做的事情，你必须在服务器端生成链接并使用 AJAX 检索它，否则唯一想要立即下载的人需要要做的是查看您页面的源代码;-)

【讨论】：

【解决方案6】：

这很简单，是的，你可以很容易地做到这一点。这是实时链接，在下载链接出现之前，您可以在其中找到制作倒数计时器的编码：http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/

干杯！！

【讨论】：

【解决方案7】：

你可以使用javascript的setTimeout函数：

// make the button not visible
setTimeout(()=>{
  // here make button visible and clickable 
},10000)

// here 10000 -> 10 seconds timeout

【讨论】：