Please someone help me i'm lost

Discussion in 'JavaScript' started by javascriptpup, Nov 26, 2009.

0
  1. #1
    I'm trying to learn this stuff and i'm having trouble, please can anyone tell me what I've done wrong with this code. This is supposed to be a simple countdown clock and I cannot seem to make it work.:eek::confused:

    <html>
    <head>
    <!--
    New Perspectives on JavaScript
    Tutorial 2
    Review Assignment

    Events in Dixon
    Author: Carlene Cruz
    Date: 11/23/09

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

    <title>Upcoming Events at Dixon</title>
    <link href="dixon.css" rel="stylesheet" type="text/css" />
    <script type = "text/javascript" src = "dates.js"></script>
    <script>
    function showCountdown(){
    var today = new Date("December 1, 2007 6:31:45");
    var Date1 = new Date("January 14, 2007 10:00:00");
    var Date2 = new Date("May 21, 2007 12:00:00");
    var Date3 = new Date("Jul 4, 2007 21:00:00");
    var Date4 = new Date("Sep 1, 2007 12:00:00");
    var Date5 = new Date("Dec 1, 2007 11:30:00");
    var Date6 = new Date("Dec 31, 2007 15:30:00");
    }
    thisDay = showDateTime(today);

    changeYear(today, Date1);

    changeYear(today, Date2);

    changeYear(today, Date3);

    changeYear(today, Date4);

    changeYear(today, Date5);

    changeYear(today, Date6);

    countdown(today, Date1);
    document.eventform.count1.value = (t);

    countdown(today, Date2);
    document.eventform.count2.value = (t);

    countdown(today, Date3);
    document.eventform.count3.value = (t);

    countdown(today, Date4);
    document.eventform.count4.value = (t);

    countdown(today, Date5);
    document.eventform.count5.value = (t);

    countdown(today, Date6);
    document.eventform.count6.value = (t);

    </script>
    </head>

    <body onload="showCountdown()">
    <form name="eventform" id="eventform" action="">

    <div oid="links1">
    <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>
    </div>
    <div id="logo">
    <img src="logo.jpg" alt="New Years Bash" />
    </div>
    <div id="links2">
    <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>
    <td></td>
    <th style="text-align: right">Current Time </th>
    <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /><script></script></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 am"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 pm"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 pm" 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 pm" 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 am" 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 pm" readonly="readonly" size="20" /></td>
    <td><input name="count6" id="count6" size="40" /></td>
    </tr>
    </table>
    </div>

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

    AND THIS ON ANOTHER PAGE

    /*
    New Perspectives on JavaScript
    Tutorial 2
    Review Assignment

    Author: Carlene Cruz
    Date: 11/25/2009

    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) ? " am" : " pm";
    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;
    }

    //changess a date's year value if the date has already been passed in the current calendar year
    function changeYear(today, holiday){
    var year = today.getFullYear();
    holiday.setFullYear(year);
    today = (holiday < today) ? year + 1 : year;
    year = holiday.setFullYear(year);
    }

    //returns a text string displaying the number of days, hours, minutes & seconds
    //between a starting date and a stopping date
    function countdown(start, stop){
    //start contains date object for the starting date
    //stop contains a date object for the stopping date
    var time = stop - start;

    var days = Math.floor(time/1000/60/60/24);
    time = time - days*1000*60*60*24;

    var hours = Math.floor(time/1000/60/60);
    time = time - days*1000*60*60;

    var minutes = Math.floor(time/1000/60);
    time = time - days*1000*60;

    var seconds = Math.floor(time/1000);
    time = time - days*1000;

    var t = days + "days" + hours + "hours" + minutes + "minutes" + seconds + "seconds";
    return t;
    }
     
    javascriptpup, Nov 26, 2009 IP
  2. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    following might help..

    
<html>
<head>
<!-- 
New Perspectives on JavaScript
Tutorial 2
Review Assignment

Events in Dixon
Author: Carlene Cruz
Date: 11/23/09

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

<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript" src = "dates.js"></script>
<script>
function showCountdown(){
var today = new Date("December 1, 2007 6:31:45");
var Date1 = new Date("January 14, 2007 10:00:00");
var Date2 = new Date("May 21, 2007 12:00:00");
var Date3 = new Date("Jul 4, 2007 21:00:00");
var Date4 = new Date("Sep 1, 2007 12:00:00");
var Date5 = new Date("Dec 1, 2007 11:30:00");
var Date6 = new Date("Dec 31, 2007 15:30:00");


var thisDay = showDateTime(today);

changeYear(today, Date1);
var t = countdown(today, Date1);
document.eventform.count1.value = (t);

changeYear(today, Date2);
t = countdown(today, Date2);
document.eventform.count2.value = (t);

changeYear(today, Date3);
t = countdown(today, Date3);
document.eventform.count3.value = (t);

changeYear(today, Date4);
t = countdown(today, Date4);
document.eventform.count4.value = (t);

changeYear(today, Date5);
t = countdown(today, Date5);
document.eventform.count5.value = (t);

changeYear(today, Date6);
t = countdown(today, Date6);
document.eventform.count6.value = (t);
}


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) ? " am" : " pm";
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;
}

//changess a date's year value if the date has already been passed in the current calendar year
function changeYear(today, holiday){
var year = today.getFullYear();
holiday.setFullYear(year);
today = (holiday < today) ? year + 1 : year;
year = holiday.setFullYear(year);
}

//returns a text string displaying the number of days, hours, minutes & seconds
//between a starting date and a stopping date
function countdown(start, stop){
//start contains date object for the starting date
//stop contains a date object for the stopping date
var time = stop - start;

var days = Math.floor(time/1000/60/60/24);
time = time - days*1000*60*60*24;

var hours = Math.floor(time/1000/60/60);
time = time - days*1000*60*60;

var minutes = Math.floor(time/1000/60);
time = time - days*1000*60;

var seconds = Math.floor(time/1000);
time = time - days*1000;

var t = days + "days" + hours + "hours" + minutes + "minutes" + seconds + "seconds";
return t;
}


</script>
</head>

<body onload="showCountdown()">
<form name="eventform" id="eventform" action="">

<div oid="links1">
<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>
</div>
<div id="logo">
<img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
<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>
<td></td>
<th style="text-align: right">Current Time </th>
<td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /><script></script></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 am"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 pm"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 pm" 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 pm" 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 am" 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 pm" readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

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

AND THIS ON ANOTHER PAGE

/*
New Perspectives on JavaScript
Tutorial 2
Review Assignment

Author: Carlene Cruz
Date: 11/25/2009

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) ? " am" : " pm";
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;
}

//changess a date's year value if the date has already been passed in the current calendar year
function changeYear(today, holiday){
var year = today.getFullYear();
holiday.setFullYear(year);
today = (holiday < today) ? year + 1 : year;
year = holiday.setFullYear(year);
}

//returns a text string displaying the number of days, hours, minutes & seconds
//between a starting date and a stopping date
function countdown(start, stop){
//start contains date object for the starting date
//stop contains a date object for the stopping date
var time = stop - start;

var days = Math.floor(time/1000/60/60/24);
time = time - days*1000*60*60*24;

var hours = Math.floor(time/1000/60/60);
time = time - days*1000*60*60;

var minutes = Math.floor(time/1000/60);
time = time - days*1000*60;

var seconds = Math.floor(time/1000);
time = time - days*1000;

var t = days + "days" + hours + "hours" + minutes + "minutes" + seconds + "seconds";
return t;
}
    Code (markup):
     
    mastermunj, Nov 30, 2009 IP