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

Question

On the download page, I would like to have it so that when the page loads, a timer lasts 10 seconds automatically. On the page, I would like some text to say something like “You can start the download in 10 seconds ...” Then, after the time comes, the download button will appear so that people can click and start the download.

How can I do this and what code can I use to include it in the page?

Answer 1

See: http://jsfiddle.net/rATW7/

It is backward compatible and not so secure, but 10 seconds is not worried about anyway.

Answer 2

You can use setInterval() for this.

Note that make sure that countdownElement has an existing text node, which can be any space. If you cannot guarantee this, simply use innerHTML or 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

No one can guarantee that your intervals are accurate, especially if the tab (or browser) is inactive (see, for example, this post ), so it’s better to rely on the time difference instead of a 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); 

working violin

Answer 4

Modification of the script provided by Yuri, who does NOT use jQuery, and also works with the clock if the number of seconds is large enough.

 <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

I wrote a response with code, but alex's answer is better than my quick and dirty solution.

Please note that if you want to do something like what Rapidshare and others do, you will have to generate a link on the server side and get it using AJAX, otherwise the only thing that wants to get the download is to see the source code of your pages; -)

Answer 6

It is very simple, yes, you can do it very easily. A direct link is available here, in which you can find the tracking for the countdown timer before the download link appears: http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/

Greetings !!