Jump to content

Countdown then display link.


sphinx

Recommended Posts

Hi all,

 

Basicly, I want javascript to display a countdown, then once the timer has expired display a link, so far I have this

 

<div id="my_div"></div>
<script>
var element_id = "my_div" ;                                        
var link_text = "<a href='cdtl.html'>Hello</a>";     
var time = 3;                                                            
setTimeout(function(){document.getElementById(element_id).innerHTML = link_text},time*1000)
</script>

 

Outcome:

 

http://prizelive.net/dnd/cdtl.html

 

Is it possible to add a countdown to that instead of nothing showing before link shows.

 

Thanks.

Link to comment
https://forums.phpfreaks.com/topic/214216-countdown-then-display-link/
Share on other sites

<html>
<head>

<script type="text/javascript">

window.onload = function()
{
    countDown('my_div', '<a href="cdtl.html">Hello</a>', 3);
}

function countDown(elID, output, seconds)
{
    document.getElementById(elID).innerHTML = (seconds==0) ? output : seconds;
    if(seconds==0) { return; }
    setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000);
}
</script>

</head>
<body>

<div id="my_div"></div>

</body>
</html>

mjdamato, you are an utter pro at this,

 

Lastly, can this countdown be used in conjuction with each other, because i want two of the same timing countdowns to appear on my website, however text needs to be different so it's fits, ive tried this:

 

<script type="text/javascript">

window.onload = function()
{
    countDown('my_div', '<a href="#">Click here to go to the main homepage.</a>', 10);
}

function countDown(elID, output, seconds)
{
    document.getElementById(elID).innerHTML = (seconds==0) ? output : '<span style="color: rgb(255, 0, 0);">The link will appear in: ' + seconds; 
    if(seconds==0) { return; }
    setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000);
}
</script>


<script type="text/javascript">

window.onload = function()
{
    countDown1('account', '<a href="#">Click here.</a>', 10);
}

function countDown1(elID1, output1, seconds1)
{
    document.getElementById(elID1).innerHTML = (seconds1==0) ? output1 : '<span style="color: rgb(255, 0, 0);">Wait ' + seconds1; 
    if(seconds1==0) { return; }
    setTimeout("countDown1('"+elID1+"', '"+output1+"', "+(seconds1-1)+")", 1000);
}
</script>

 

And div'd it uniquely:

 

<div id="account"></div>
+
<div id="my_div"></div>

The only problem is, only one of them works which is the account div one.

 

thanks a million.

Are you trying to piss me off? I say that jokingly, but it is kind of frustrating when you provide a solution to someone and then they change the requirements (not once, but twice!). Just tell me up front what you want. If I can't provide it all then I will provide what I can.

 

<html>
<head>

<script type="text/javascript">

window.onload = function()
{
    countDown('my_div1', '<a href="cdtl.html">Hello 1</a>', 3);
    countDown('my_div2', '<a href="cdtl.html">Hello 2</a>', 5);
    countDown('my_div3', '<a href="cdtl.html">Hello 3</a>', 10);
}

function countDown(elID, output, seconds)
{
    document.getElementById(elID).innerHTML = (seconds==0) ? output : 'Time until link appears: ' + seconds;
    if(seconds==0) { return; }
    setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000);
}
</script>
  
</head>
<body>
  
<div id="my_div1"></div>
<div id="my_div2"></div>
<div id="my_div3"></div>

</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.