...
PDA

Adding an if() statement to a countdown function

Faeroph
11-01-2004, 07:54 PM
Hi all,

I'm trying to add an if() statement to this countdown function, because currently it's possible for the 'hour' values in all the countdown tables except one (GMT) to display numbers outside the normal range (0 - 23). What I would like to add to the script is something along the lines of:

if(strHours > 23)
math.floor(strHours - 24)
math.floor(strDays - 1)
else

However, I don't want the statement to apply to the entire strHours variable. Instead, I want that statement to apply to two of the countdown tables. I don't think I can treat the document.getElementById() definition (which is all that makes the strHours variable display differently) as a variable, so how would I go about this? I'll post the code and highlight the parts I'm having problems with:

Head:

<script type="text/javascript">
var timer = null

function CountDown(){
{
clearTimeout(timer)
}

var now = new Date();
var then = new Date(2004,10,7,1,0,0);
var toGo = then.getTime() - now.getTime();

var strDays = Math.floor(toGo / (1000 * 60 * 60 * 24));
var strDaysM = toGo - (Math.floor(strDays * 1000 * 60 * 60 * 24));

var strHours = Math.floor(strDaysM / (1000 * 60 * 60));
var strHoursM = strDaysM - Math.floor(strHours * 1000 * 60 * 60);

var strMins = Math.floor(strHoursM / (1000 * 60));
var strMinsM = strHoursM - Math.floor(strMins * 1000 * 60);

var strSecs = Math.floor(strMinsM / (1000));
var strSecsM = strMinsM - Math.floor(strSecs * 1000);

document.getElementById("Days_left").innerHTML = strDays;
document.getElementById("Days_leftEst").innerHTML = strDays;
document.getElementById("Days_leftCet").innerHTML = strDays;
document.getElementById("Days_leftAest").innerHTML = strDays;
document.getElementById("Hours_left").innerHTML = strHours;
document.getElementById("Hours_leftEst").innerHTML = Math.floor(strHours - 5);
document.getElementById("Hours_leftCet").innerHTML = Math.floor(strHours + 1);
document.getElementById("Hours_leftAest").innerHTML = Math.floor(strHours + 11);
document.getElementById("Minutes_left").innerHTML = strMins;
document.getElementById("Minutes_leftEst").innerHTML = strMins;
document.getElementById("Minutes_leftCet").innerHTML = strMins;
document.getElementById("Minutes_leftAest").innerHTML = strMins;
document.getElementById("Seconds_left").innerHTML = strSecs;
document.getElementById("Seconds_leftEst").innerHTML = strSecs;
document.getElementById("Seconds_leftCet").innerHTML = strSecs;
document.getElementById("Seconds_leftAest").innerHTML = strSecs;

timer = setTimeout("CountDown()",1000)

}
</script>


Body:

<body bgcolor="#000000" onLoad="CountDown()">
<font face="tahoma" color="#FFFFFF">
<br>GMT:
<br>
<table bgcolor="#003300" width="300" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#004400">
<td colspan="4" align="center"><font color="#FFFFFF">Event date: 7th Nov 2004 1AM</font></td>
</tr>
<tr>
<td colspan="4" align="center"><font color="#FFFFFF">This event starts in:</font></td>
</tr>
<tr>
<td width="75" align="center"><font color="#FFFFFF">Days</font></td>
<td width="75" align="center"><font color="#FFFFFF">Hours</font></td>
<td width="75" align="center"><font color="#FFFFFF">Minutes</font></td>
<td width="75" align="center"><font color="#FFFFFF">Seconds</font></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF"><span id="Days_left"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Hours_left"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Minutes_left"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Seconds_left"></span></font></td>
</tr>
</table>
<br>
<br>EST:
<br>
<table bgcolor="#003300" width="300" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#004400">
<td colspan="4" align="center"><font color="#FFFFFF">Event date: 6 Nov 2004 8PM</font></td>
</tr>
<tr>
<td colspan="4" align="center"><font color="#FFFFFF">This event starts in:</font></td>
</tr>
<tr>
<td width="75" align="center"><font color="#FFFFFF">Days</font></td>
<td width="75" align="center"><font color="#FFFFFF">Hours</font></td>
<td width="75" align="center"><font color="#FFFFFF">Minutes</font></td>
<td width="75" align="center"><font color="#FFFFFF">Seconds</font></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF"><span id="Days_leftEst"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Hours_leftEst"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Minutes_leftEst"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Seconds_leftEst"></span></font></td>
</tr>
</table>
<br>
<br>CET:
<br>
<table bgcolor="#003300" color="#FFFFFF" width="300" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#004400">
<td colspan="4" align="center"><font color="#FFFFFF">Event date: 7th Nov 2004 2AM</font></td>
</tr>
<tr>
<td colspan="4" align="center"><font color="#FFFFFF">This event starts in:</font></td>
</tr>
<tr>
<td width="75" align="center"><font color="#FFFFFF">Days</font></td>
<td width="75" align="center"><font color="#FFFFFF">Hours</font></td>
<td width="75" align="center"><font color="#FFFFFF">Minutes</font></td>
<td width="75" align="center"><font color="#FFFFFF">Seconds</font></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF"><span id="Days_leftCet"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Hours_leftCet"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Minutes_leftCet"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Seconds_leftCet"></span></font></td>
</tr>
</table>
<br>
<br>AEST:
<br>
<table bgcolor="#003300" color="#FFFFFF" width="300" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#004400">
<td colspan="4" align="center"><font color="#FFFFFF">Event date: 7th Nov 2004 12NOON</font></td>
</tr>
<tr>
<td colspan="4" align="center"><font color="#FFFFFF">This event starts in:</font></td>
</tr>
<tr>
<td width="75" align="center"><font color="#FFFFFF">Days</font></td>
<td width="75" align="center"><font color="#FFFFFF">Hours</font></td>
<td width="75" align="center"><font color="#FFFFFF">Minutes</font></td>
<td width="75" align="center"><font color="#FFFFFF">Seconds</font></td>
</tr>
<tr><td align="center"><font color="#FFFFFF"><span id="Days_leftAest"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Hours_leftAest"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Minutes_leftAest"></span></font></td>
<td align="center"><font color="#FFFFFF"><span id="Seconds_leftAest"></span></font></td>
</tr>
</table>
</font>
</body>


What would be even better is if an alternative suggestion could be given. I know that quite a simple option would be just to use a different variable for the 'CET' and 'AEST' times, but I tried this and it entailed changing every single math variable to fit them in, which didn't seem ideal either.

In summary, my question is: how would I add the given if() statement to this code and where should it be placed?
Willy Duitt
11-01-2004, 11:57 PM
You may be better served by describing what it is you are trying to do and what the display should look like....
Faeroph
11-03-2004, 09:01 PM
Fair enough.

The script is a simple countdown function that counts down to a specific date and time. The four tables in the body section display the time remaining in four timezones. The time that the script counts down to is the 7th November 2004, 1AM GMT, and the script rather bluntly takes or adds a value to make the time correct in the other time zones (for example, in the EST timezone, the user's clock would be 5 hours behind the GMT time, so the script simply takes 5 hours away from the strHours value).

What I'd like is a function, perhaps something like one or two copies of the if() idea I included in the first topic, that checks to see whether the hours remaining value is less than 0 or greater than 23 and adjusts the hours and days figure accordingly.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum