8

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.

How can I do this, and what code do I use to include it into a page?

Omar
  • 81
  • 1
  • 1
  • 3

7 Answers7

11

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

It's backwards-compatible and not so secure, but 10 seconds isn't much to worry about anyways.

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 1
    @Omar Anyone can inspect the source and get the download link without waiting 10 seconds. – alex May 27 '11 at 00:08
  • 1
    Are you really 13 minitech? Bravo on your coding skills (+1) so young, you will go far :) – alex May 27 '11 at 00:09
  • 1
    @Omar: If you really wanted it to be secure, you would have to implement server-side validation too, and that is just wasted effort for a 10-second wait IMO. Also it's not intuitive to people browsing without JavaScript. Luckily, it will actually take people over 10 seconds to modify and bypass the script, so it doesn't matter anyways. – Ry- May 27 '11 at 00:10
  • Alright, thanks everyone for the help.. appreciate it. You all convinced me NOT to include this in my site. I thought it would be a good add... guess not LOL! :P – Omar May 27 '11 at 00:13
  • Well the only real issue is that without the server side validation someone could create something like a greasemonkey script that bypassed it for all downloads on your site. So not really an issue unless you have tons of DLs. – Jonathon May 27 '11 at 00:23
7

You can use setInterval() to do this.

Note that make sure the countdownElement has an existing text node, which can be any whitespace. If you can't guarantee that, just 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.

alex
  • 479,566
  • 201
  • 878
  • 984
3

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

Community
  • 1
  • 1
Yuriy Silvestrov
  • 422
  • 4
  • 10
  • I provided an alternate answer which is a modification your Fiddle solution which uses no JQuery and works with hours. – Sherri May 14 '14 at 19:00
3

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.

<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>
Sherri
  • 816
  • 2
  • 9
  • 18
1

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

AlvaroGMJ
  • 416
  • 2
  • 7
0

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/

Cheers !!

Nitin Maheta
  • 1
0

You can use setTimeout function of javascript :

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

// here 10000 -> 10 seconds timeout
Hoang Subin
  • 6,610
  • 6
  • 37
  • 56
Kishlay
  • 1