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 7 of 7

Thread: tulsa countdown

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Laurel, MD
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    tulsa countdown

    I'm not sure what im doing wrong here this technique im using works for a different countdown file. Here is the code:

    /*
    New Perspectives on JavaScript, 2nd Edition
    Tutorial 2
    Review Assignment

    Author: Andrew Duren
    Date: 8 May 2011

    Function List:
    showDateTime(time)
    Returns the date in a text string formatted as:
    mm/dd/yyyy at hh:mm:ss am

    changeYear(today, holiday)
    Changes the year value of the holiday object to point to the
    next year if it has already occurred in the present year

    countdown(stop, start)
    Displays the time between the stop and start date objects in the
    text format:
    dd days, hh hrs, mm mins, ss secs
    */

    function showDateTime(time) {
    date = time.getDate();
    month = time.getMonth()+1;
    year = time.getFullYear();

    second = time.getSeconds();
    minute = time.getMinutes();
    hour = time.getHours();

    ampm = (hour < 12) ? " a.m." : " p.m.";
    hour = (hour > 12) ? hour - 12 : hour;
    hour = (hour == 0) ? 12 : hour;

    minute = minute < 10 ? "0"+minute : minute;
    second = second < 10 ? "0"+second : second;

    return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
    }

    function changeYear(today, holiday) {
    var year = today.getFullYear();
    holiday.setFullYear(year);
    year = (today > holiday) ? year + 1 : year;
    year = holiday.setFullYear(year);
    }

    function countdown(start, stop){
    time = stop - start;
    var rawdays = ((time)/(1000*60*60*24));
    days = Math.floor(rawdays); //milisec/sec*sec/min*mins/hour*hours/day is what's divided 4 value
    var rawhours = ((rawdays - days)*24) - 1;
    hours = Math.floor(rawhours);
    var rawminutes = (rawhours - hours)*60;
    minutes = Math.floor(rawminutes);
    var rawseconds = ((rawminutes - minutes)*60) + 1;
    seconds = Math.floor(rawseconds);

    return days + " days, " + hours + " hours, " + minutes + " mins, " + seconds + " secs";
    }

    HTML file:

    <?xml version="1.0" encoding="UTF-8" ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <!--
    New Perspectives on JavaScript, 2nd Edition
    Tutorial 2
    Review Assignment

    Events in Tulsa
    Author: Andrew Duren
    Date: 08 May 2011

    Filename: events.htm
    Supporting files: dates.js, logo.jpg, tulsa.css
    -->

    <title>Upcoming Events at Tulsa</title>
    <link href="tulsa.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="dates.js"></script>
    <script type = "text/javascript">

    function timeLeft() {
    //the today variable contains the current date and time
    var today = new Date();
    var Date1 = new Date("January 14, 2011 10:00:00");
    var Date2 = new Date("May 21, 2011 12:00:00");
    var Date3 = new Date("July 4, 2011 9:00:00");
    var Date4 = new Date("September 1, 2011 12:00:00");
    var Date5 = new Date("December 1, 2011 11:30:00");
    var Date6 = new Date("December 31, 2011 3:30:00");
    //Display the current date and time.
    document.eventform.thisDay.value = showDateTime(today);

    changeYear(today, Date1);
    changeYear(today, Date2);
    changeYear(today, Date3);
    changeYear(today, Date4);
    changeYear(today, Date5);
    changeYear(today, Date6);

    document.eventform.count1.value = countdown(today, Date1);
    document.eventform.count2.value = countdown(today, Date2);
    document.eventform.count3.value = countdown(today, Date3);
    document.eventform.count4.value = countdown(today, Date4);
    document.eventform.count5.value = countdown(today, Date5);
    document.eventform.count6.value = countdown(today, Date6);

    }
    </script>
    </head>

    <body onload="setInterval('timeLeft()', 1000)">
    <form name="eventform" id="eventform" action="">

    <div id="logo">
    <img src="logo.jpg" alt="Tulsa Events" />
    </div>
    <div id="links">
    <a href="#">Home</a>
    <a href="#">City Services</a>
    <a href="#">City Agencies</a>
    <a href="#">Mayor's Office</a>
    <a href="#">News Today</a>
    <a href="#">Upcoming Events</a>
    <a href="#">Site Map</a>
    <a href="#">Search Engine</a>
    <a href="#">Public Notices</a>
    <a href="#">Survey Form</a>
    <a href="#">Contact Us</a>
    <a href="#">E-Government</a>
    </div>


    <div id="main">
    <h3>Countdown to Upcoming Events</h3>
    <table>
    <tr>
    <th colspan="2" style="text-align: right">Current Date and Time</th>
    <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
    </tr>
    <tr>
    <th>Event</th>
    <th>Starting Time</th>
    <th>Countdown to Event</th>
    </tr>
    <tr>
    <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
    <td><input value="Jan 14 at 10:00 a.m." readonly="readonly" size="20" /></td>
    <td><input name="count1" id="count1" size="40" /></td>
    </tr>
    <tr>
    <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
    <td><input value="May 21 at 12:00 p.m." readonly="readonly" size="20" /></td>
    <td><input name="count2" id="count2" size="40" /></td>
    </tr>
    <tr>
    <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
    <td><input value="Jul 4 at 9:00 p.m." readonly="readonly" size="20" /></td>
    <td><input name="count3" id="count3" size="40" /></td>
    </tr>
    <tr>
    <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
    <td><input value="Sep 1 at 12:00 p.m." readonly="readonly" size="20" /></td>
    <td><input name="count4" id="count4" size="40" /></td>
    </tr><tr>
    <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
    <td><input value="Dec 1 at 11:30 a.m." readonly="readonly" size="20" /></td>
    <td><input name="count5" id="count5" size="40" /></td>
    </tr>
    <tr>
    <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
    <td><input value="Dec 31 at 3:30 p.m." readonly="readonly" size="20" /></td>
    <td><input name="count6" id="count6" size="40" /></td>
    </tr>
    </table>
    </div>

    </form>
    </body>
    </html>

    Even tho my method works for 1 file it's inconsistent with this one, there must be a better technique I can use in case I have to do 100 countdowns on a page.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    works fine for me - the only difference I guess would be that I dumped all of the js and html into one file. are you sure you're referencing dates.js correctly from the html file? or if so, what exactly is the problem?
    Last edited by xelawho; 09-07-2011 at 04:29 PM.

  • Users who have thanked xelawho for this post:

    shschesschamp (09-14-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Laurel, MD
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm pretty sure that I'm referencing it correctly, but the hours part where it counts down on all of them doesn't consistently work for all 6 events. It works fine for days, minutes and seconds, but not hours it's kinda maddening.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    come on, dude... give us some DETAIL. Or do we have to sit watching the seconds count down until an hour ticks over to see what the problem is?

  • Users who have thanked xelawho for this post:

    shschesschamp (09-14-2011)

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Laurel, MD
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Please see the attachment. The new years bash is wrong it should take 19 hours not 7 hours. It has to be my technique it's gotta be wrong somehow. The hours are correct for about half of these countdowns tho.
    Attached Thumbnails Attached Thumbnails tulsa countdown-tulsa-screenshot.jpg  

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    exactly 12 hours out, eh?

    so... if you were to change
    var Date6 = new Date("December 31, 2011 3:30:00");

    to
    var Date6 = new Date("December 31, 2011 15:30:00");

    you might be happier with the results?

  • Users who have thanked xelawho for this post:

    shschesschamp (09-14-2011)

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Laurel, MD
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It's definitely better now instead of being more than 12 hours off in some of these countdowns it's only a few hours off in them. I'm thinking maybe I need to use the getHour() method or something so I can make my hours as accurate as possible. I'm definitely closer to the solution tho, you can tell I'm an amateur lol.
    Attached Thumbnails Attached Thumbnails tulsa countdown-tulsa.jpg  


  •  

    Posting Permissions

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