how to increment a javascript variable title that is within a php while loop
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
<html>
<head>
<style style="text/css">
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:lime;
font: bold 18px MS Sans Serif;
padding: 3px;
}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}
</style>
<script type="text/javascript">
/***********************************************
* Universal Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
//var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
var servertimestring = "February 3, 2011 11:30:00";
this.localtime=this.serverdate=new Date(servertimestring)
this.targetdate=new Date(targetdate)
this.debugmode=(typeof debugmode!="undefined")? 1 : 0
this.timesup=false
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
}
cdLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
cdLocalTime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}
cdLocalTime.prototype.showresults=function(){
var thisobj=this
var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : ""
var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=debugstring+this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=debugstring+this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdLocalTime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdLocalTime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc
//1) Display countdown using plain text
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring="<span style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time"
}
else{ //else if target date/time met
var displaystring="Launch time!"
}
return displaystring
}
//2) Display countdown with a stylish LCD look, and display an alert on target date/time
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until launch time"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Launch time!") //Instead, perform a custom alert
}
return displaystring
}
</script>
</head>
<body>
<script>
var clockTimes = [
"February 4, 2011 11:11:00",
"April 22, 2011 22:22:00",
"December 23, 2011 23:23:00"
];
var cd=[]
for (var i=0;i<clockTimes.length;i++) {
document.write('<div id="cdcontainer'+i+'"></div>');
//cdLocalTime("ID_of_DIV_container", "server_mode", LocaltimeoffsetMinutes, "target_date", "opt_debug_mode")
//cdLocalTime.displaycountdown("base_unit", formatfunction_reference)
//Note: "launchdate" should be an arbitrary but unique variable for each instance of a countdown on your page:
cd[i]=new cdLocalTime("cdcontainer"+i, "server-php", 0, clockTimes[i], "debugmode")
cd[i].displaycountdown("days", formatresults2)
}
</script>
Try this
<script language="javascript" src="countdown.js"></script>
<script language="javascript">
var numclocks = <?php echo $clocks; ?>;
var clockTime = "<?php echo $clocktime; ?>";
var cd=[]
for (var i=0;i<numclocks;i++) {
cd[i] = new countdown('cd'+i);
cd[i].Div = "clock"+i;
cd[i].TargetDate = clockTime;
cd[i].DisplayFormat = "%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds until event AAA happens";
document.write('<div id="clockwrapper'+i+'"><div id="clock'+i+'">[clock]</div></div>')
cd[i].Setup(); // but we still need to fix the setTimout in a closure
}
</script>
加载中,请稍侯......
精彩评论