Forum Moderators: open
This is for the JavaScrip's experts here ;-)
In my web site I want to put multiple countdowns .. about 10 - 12 more or less.. then I have been trying to get a function which will create a separate countdown per event that I want to register..and I have this:
//
// This is my function
//
function countDown(fDiv, fTime){
//
// fDiv is the 'id' for a <div></div> html tag
// fTime is the number of miliseconds to countdown ...let's say 10000 for 10 seconds
//
var me=document.all(fDiv);
var cd=new Date();
var ed=new Date(cd.getTime() + fTime);count_event=Math.floor((ed.getTime()-cd.getTime())/1000);
//alert (cd.getTime() + " cd," + ed.getTime() + " ed," + count_event);
if (count_event > 0) {
ss_event=toSt(count_event%60);
count_event=Math.floor(count_event/60);
mm_event=toSt(count_event%60);
count_event=Math.floor(count_event/60);
hh_event=toSt(count_event%24);
count_event=Math.floor(count_event/24);
dd_event=count_event;me.innerHTML = dd_event + "d " + hh_event + ":" + mm_event + ":" + ss_event;
} else {
me.innerHTML = "----------";
}setTimeout("countDown('"+fDiv+"',"+fTime+")",1000);
}
The function is in an external .js file which I insert the <head> like :
<script language="javascript" src="mycountdown.js"></script>
Then down in th body I insert a <div> like:
<div id="count1"></div>
and just below the <div> I call the function like:
<script language="javascript">countDown('count1',10000)</script>
ok, now... the script loads and gets executed every second as is intended but because of the parameters being local to the function, every time it gets executed again it prints the same time :-( .. so I did a little change to the last line and it now reads:
setTimeout("countDown('"+fDiv+"',"+(fTime-1000)+")",1000);
meaning every time the function get executed it runs with -1000 miliseconds that last time.. it kind of works now and I'm able to call the function multiple times using different <div> ids... like :
<div id="count1"></div>
<script language="javascript">countDown('count1',10000)</script>
<div id="count2"></div>
<script language="javascript">countDown('count2',10000)</script>
<div id="count3"></div>
<script language="javascript">countDown('count3',10000)</script>
But what I can see is that in my -1000 method, depending of the load of the pc and specially if I switch to a different window for a while it tends to miss the time synchronization .. and after some time it will be secs ahead or behind...
I know that to avoid the problem I could use a global variable to store the initial date and then initialize that variable in a different function so I'll always have the 'event' date fix and it will work fine... but then, how would I handle the 'multiple' countdowns?... I may have just 1 or 2 at some point, but may have up to 10-20 on the same page, my -1000 function works but gets out of sync, having a global I would need to 'hardcode' and 'limit' the number of countdowns, and I really need to have many for this special page.
Is there a way of creating a 'dinamyc name' global variable inside the function only the first time the function is called and then re-use it from the subsequent calls?
I hope somebody here can help me.
Thanks a lot.
Carlos.
Thanks for your reply.
May be the example was not clear, I can not implement one master timer because each 'event' will finalize at a differente time. Let me explain better, in my site my users have 'x' time to beat a record against all the other users.. to beat the record (which is a PC game) they need to demostrate that are able to do it in a limited time, the way to control it is requesting a 'code' every time they want to try (number of times tha a user can try are limited to), then feeding the code into the game and once they finish (before the time expires), they need to register its try and the 'code' must match.
Now, because different users are requesting the 'code' at different times, the time is over for each of them at different times too.. I wan to show in a web page, all the users that are 'currently using' a code.. so they will know how many are playing at the same time and the time left for each one (using the countdown).
The for example, if 3 users request a code:
user1 at 14:00
user2 at 14:15
user3 at 14:20
and the time limit is 30 mins, the time will be over for each of them like:
user1 at 14:30
user2 at 14:45
user3 at 14:50
so .. I want to show a count down for each user with the time left. That way, other peoplel will know also that there are currently 3 users playing and the time left for each of them.
About much timers, Then u get a page you are already knows a time then a user starts a game. U get a time know and make offset for each user time. And each time of process u have these offsets and while one user playing u add this offsets to it's timer and get other timers.
Then one users stops or resume game u send appropriate commands to a server. Each user ask about this commands in a hidden iframe and knows if somebody stops his game, and adding to his offset needed time. Then ur offsets was absolutely equal with situation in a game.
If i'm right and user play game in his own machine it's the only way to make interaction between them.
I hope i was clear. If i'm not understand u right, i'm very sorry(
