Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding an if() statement to a countdown function

    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:
    Code:
    <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:
    Code:
    <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?

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You may be better served by describing what it is you are trying to do and what the display should look like....

  • #3
    New Coder
    Join Date
    Oct 2002
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •