Question

在下载页面上，我希望能够在页面加载时自动启动10秒计时器。在页面上，我想要一些文字说“你可以在10秒内开始下载......”然后，在时间到了之后会出现一个下载按钮供人们点击并开始下载。

我该怎么做，我用什么代码将它包含在页面中？

Answer 1

它向后兼容并且不那么安全，但不管怎么说10秒都不用担心。

Answer 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

Answer 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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

干杯!!

Answer 7

您可以使用 javascript 的 setTimeout 函数：

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

// here 10000 -> 10 seconds timeout

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

7 个答案: