Javascript 如何在下载按钮链接出现之前制作 10 秒倒数计时器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6146391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a 10 second countdown timer before a download button link appears?
提问by Omar
On a download page, I would like to have it so that when the page loads, a 10 second timer automatically starts. On the page, I would like some text to say something like "You can begin your download in 10 seconds..." Then, after the time is up a download button appears for people to click on and start their download.
在下载页面上，我希望在页面加载时自动启动 10 秒计时器。在页面上，我想要一些文字，例如“您可以在 10 秒内开始下载……”然后，时间到了之后会出现一个下载按钮，供人们点击并开始下载。
How can I do this, and what code do I use to include it into a page?
我该怎么做，我使用什么代码将它包含到页面中？
回答by Ry-
See: http://jsfiddle.net/rATW7/
It's backwards-compatible and not so secure, but 10 seconds isn't much to worry about anyways.
它向后兼容且不那么安全，但 10 秒无论如何也不必担心。
回答by alex
You can use setInterval()to do this.
您可以使用它setInterval()来执行此操作。
Note that make sure the countdownElementhas an existing text node, which can be any whitespace. If you can't guarantee that, just use innerHTMLor innerText/textContent.
请注意，确保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);
}
回答by Yuriy Silvestrov
Noone could ensure that your intervals are exact, especially if tab (or browser) is inactive (see e.g. this post), so it's better to rely on time difference instead of counter:
没有人可以确保您的间隔是准确的，特别是如果选项卡（或浏览器）处于非活动状态（参见例如这篇文章），因此最好依靠时差而不是计数器：
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);
The working fiddle
回答by Sherri
A modification of the Fiddle provided by Yuriy which does NOT use JQuery, and works with hours as well if the # of seconds are large enough.
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>
回答by AlvaroGMJ
I was writing a reply with code, but alex's reply is better than my quick & dirty solution.
我正在用代码写回复，但亚历克斯的回复比我的快速和肮脏的解决方案要好。
Take into account that if you want to do something like what Rapidshare and others do, you will have to generate the link at the server side and retrieve it with AJAX, otherwise the only thing whoever wants to get the download immediately needs to do is to see the source code of your page ;-)
考虑到如果你想做一些像 Rapidshare 和其他人所做的事情，你必须在服务器端生成链接并用 AJAX 检索它，否则想要立即下载的人唯一需要做的就是查看页面的源代码 ;-)
回答by Nitin Maheta
This is very simple, yes you can make it very easily. Here's the live link, where you can find the codding for making countdown timer , before download link appears : http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/
这很简单，是的，你可以很容易地做到。这是实时链接，在下载链接出现之前，您可以在其中找到制作倒数计时器的编码：http: //www.makingdifferent.com/make-countdown-timer-download-button-link-appears/
Cheers !!
干杯！！
