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

How can I make a 10 second countdown timer before a download button link appears?

本文关键字：设置 10秒 倒计时 下载 按钮 链接      更新时间：2023-09-26

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

我该如何做到这一点，以及使用什么代码将其包含在页面中？

请参阅：http://jsfiddle.net/rATW7/

它是向后兼容的，不那么安全，但10秒无论如何都不需要担心。

您可以使用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。

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

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

工作小提琴

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>

我用代码写了一个回复，但alex的回复比我的quick&脏溶液。

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

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

干杯！！

您可以使用javascript:的setTimeout函数

// make the button not visible
setTimeout(()=>{
  // here make button visible and clickable 
},10000)
// here 10000 -> 10 seconds timeout
相关文章：