I’m building multiple countdown clocks on one page. The number of countdown clocks varies from day to day so I need to call javascript several times from within “while” code in php to produce different clocks. The following code works but it’s based on knowing how many clocks are needed before I start:
<script language="javascript" src="countdown.js"></script>
<script language="javascript">
var cd1 = new countdown('cd1');
cd1.Div = "clock1";
cd1.TargetDate = "<?php echo "$clocktime"; ?>";
cd1.DisplayFormat = "%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds until event AAA happens";
</script>
<div id="clockwrapper"><div id="clock1">[clock]</div></div>
<script language="javascript" src="countdown.js"></script>
<script language="javascript">
var cd2 = new countdown('cd2');
cd2.Div = "clock2";
cd2.TargetDate = "02/01/2011 5:30:30 PM";
cd2.DisplayFormat = "%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds until event BBB happens...";
</script>
<div id="clockwrapper"><div id="clock2">[clock]</div></div>
So if I keep on calling the javascript above (the code with cd1 in it) all previous “cd1” clocks change to the latest clock because it is being overwritten. Somehow I need to call javascript from within my “while” loop in php and have cd1 become cd2, then cd3 so that the clocks work as they’re supposed to.
How do I go about doing this? I don’t know how to call the javascript several times and increment the variable cd1 within the javascript. I tried something like this but couldn’t get it to work.
$id=mysql_result($result,$i,"id");
while($id){
$cd = ("$cd"."$id");
?>
<script language="javascript" src="countdown.js"></script>
<script language="javascript">
var <?php echo "$cd"; ?> = new countdown('<?php echo "$cd"; ?>');
....
</script>
<div id="clockwrapper"><div id="<?php echo "$cd"; ?>">[clock]</div></div>
<?php
$id=mysql_result($result,$i,"id");
}
?>
Surely there is some easy way of getting around this that I don’t know about.
——————————-EDIT———————————–
Adding countdown.js below which may help
/*
Author: Robert Hashemian (http://www.hashemian.com/)
Modified by: Munsifali Rashid (http://www.munit.co.uk/)
*/
function countdown(obj)
{
this.obj = obj;
this.Div = "clock";
this.BackColor = "white";
this.ForeColor = "black";
this.TargetDate = "12/31/2020 5:00 AM";
this.DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
this.CountActive = true;
this.DisplayStr;
this.Calcage = cd_Calcage;
this.CountBack = cd_CountBack;
this.Setup = cd_Setup;
}
function cd_Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2) s = "0" + s;
return (s);
}
function cd_CountBack(secs)
{
this.DisplayStr = this.DisplayFormat.replace(/%%D%%/g, this.Calcage(secs,86400,100000));
this.DisplayStr = this.DisplayStr.replace(/%%H%%/g, this.Calcage(secs,3600,24));
this.DisplayStr = this.DisplayStr.replace(/%%M%%/g, this.Calcage(secs,60,60));
this.DisplayStr = this.DisplayStr.replace(/%%S%%/g, this.Calcage(secs,1,60));
document.getElementById(this.Div).innerHTML = this.DisplayStr;
if (this.CountActive) setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);
}
function cd_Setup()
{
var dthen = new Date(this.TargetDate);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
this.CountBack(gsecs);
}
Thanks
Here is a version using a script that does work. Uncomment the servertimestring to have it run from your php server – remove the debugmode too when you are happy
The change I made was in the body part of the page