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

Question

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

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

Answer 1

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

它是向后兼容的并且不那么安全,但无论如何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.