JavaScript Forum

**kalinowski5** · 02-14-2007, 09:12 AM

Hi!
I want to make script, wich will subcract 1 from number (for ex. 145) every second and after 145 seconds will print "END OF TIME".

I found such script but it works only on one SPAN:

Code:

         <script language=javascript>
         function countdown(n)
         {
            if (n==0)
            {
               document.getElementById('cos').innerHTML="END OF TIME";
            }
            else
            {
               n--
               s=n%60
               m=Math.floor((n%3600)/60)
               g=Math.floor(n/3600)
               document.getElementById('cos').innerHTML=""+g+":"+((m<10)?"0"+m:m)+":"+((s<10)?"0"+s:s)+"";
               if(n>=0)setTimeout("countdown("+n+")",1e3);
            }
         }
         </script> 


<body onload="countdown(145)">TIME:<span id="cos"></span>

How I can change this code that it works with two or more SPANs?
I'm waiting for yours help, please.

P.S. Sorry for my english, but I'm foregein.

**chrishirst** · 02-14-2007, 06:30 PM

how exactly do you want it to work with more span elements?

**kalinowski5** · 02-14-2007, 06:45 PM

I'm making game via Internet browser. I made php script wich return a few times (for example 75sec, 40sec and 123sec), so I need 3 span elements with diffrent times.

**willcode4beer** · 02-15-2007, 04:07 PM

Quote:

Originally Posted by kalinowski5

I'm making game via Internet browser. I made php script wich return a few times (for example 75sec, 40sec and 123sec), so I need 3 span elements with diffrent times.

Since you are making a game, I'm going to suggest having a single timer element, as having lots of timeout/interval's running could get to be a pain to debug and could make some browsers really suffer.
I've attached a file with a demo (just change the extension from txt to html).
Note: for just simple count-downs the code is probably overkill

It has a single timer/interval object that starts/stops as listeners are added. The listeners are called at each interval 'tick'.
I created a SecondTimeListener object that will call a specified onChange function only when at least a second has passed.

Anyway, by using only one timer you can maintain performance of your javascript application while using it to handle animation of multiple sprites, timers and whatever other fun things you can come up with.

The window.onload stuff at the bottom kicks everything off. I've got the timer on a 50 millisecond interval (remember, the display only updates every second), you can change it if needed. See the interval property of the Timer object.

**memberpro** · 06:12 PM

To use more than one span you must add a reference to another id in your javascript code.
Right now the program gets the value of the html of id=cos and then peforms the checks. What you will need to do is to is add aditional code to change the value of a span that you name a different id... for instance id=time1
Here would be the changes in the code to put two timers that are identical

Quote:

Originally Posted by kalinowski5

Code:

<script language=javascript>
function countdown(n)
{
if (n==0)
{
document.getElementById('cos').innerHTML="END OF TIME";
document.getElementById('time1').innerHTML="END OF TIME";
}
else
{
n--
s=n%60
m=Math.floor((n%3600)/60)
g=Math.floor(n/3600)
document.getElementById('cos').innerHTML=""+g+":"+((m<10)?"0"+m:m)+":"+((s<10)?"0"+s:s)+"";
document.getElementById('time1').innerHTML=""+g+":"+((m<10)?"0"+m:m)+":"+((s<10)?"0"+s:s)+"";
if(n>=0)setTimeout("countdown("+n+")",1e3);
}
}
</script> 
<body onload="countdown(145)">TIME:<span id="cos"></span>
<span id="time1"></span>

enjoy