logo标签列表

如何在下载按钮链接出现之前制作一个10秒倒计时计时器？

javascripttimerdownloadcountdown
8
在下载页面上，我希望当页面加载时自动启动一个10秒的计时器。在页面上，我希望有一些文本提示，如“您可以在10秒内开始下载...”然后，在时间到达后，会出现一个下载按钮供人们点击并开始下载。
我该如何做到这一点，并使用哪些代码将其包含到页面中？
@Marty Wallace：我猜是类似于MegaUpload那样的东西。 - Ry-
我想监控和防止热链接。此外，一些文件将会很大，所以我希望人们在下载文件之前等待...这样就不会影响我的服务器。 - Omar
1
这个问题肯定之前已经有人回答过了。 - Matt Ball
可能是我没找到，但我已经到处都找过了。 - Omar
7个回答
11
1
@Omar 任何人都可以检查源代码并获取下载链接，无需等待10秒钟。 - alex
1
你真的只有13岁吗，Minitech？你的编程技能真棒！（+1）这么年轻，你一定会走得很远 :) - alex
1
@Omar：如果你真的想让它更安全，你还需要实现服务器端验证，但在我看来，这只是浪费时间。而且对于没有启用JavaScript的用户来说，这也不是很直观。幸运的是，人们要修改和绕过脚本需要超过10秒钟的时间，所以无论如何都不会有影响。 - Ry-
好的，谢谢大家的帮助，非常感激。你们都说服我不要在我的网站上包含这个功能了。我原以为这会是一个很好的补充...看来不是哈哈！:P - Omar
唯一真正的问题是，如果没有服务器端验证，某人可以创建类似于Greasemonkey脚本的东西，绕过您网站上所有下载的验证。因此，除非您有大量下载，否则这不是真正的问题。 - Jonathon
7

您可以使用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
@Omar，使用fiddle可能更容易理解。我的答案中没有PHP。 - alex
3
一个修改自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>
3

没有人能确保你的时间间隔是精确的，特别是当标签页（或浏览器）处于非活动状态时（参见例如这篇文章），因此最好依靠时间差而不是计数器：

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);

这个可用的代码示例。

我提供了一个备选答案，这是对您的Fiddle解决方案进行修改的结果，它不使用JQuery并且适用于小时。 - Sherri
1

我正在写一个带有代码的回复，但是Alex的回复比我的快速而粗糙的解决方案更好。

请注意，如果您想做类似Rapidshare和其他网站的事情，您将不得不在服务器端生成链接，并通过AJAX检索它，否则任何想立即获取下载的人只需要查看您页面的源代码即可。

0
0

你可以使用 JavaScript 的 setTimeout 函数：

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

// here 10000 -> 10 seconds timeout
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接