Tweet
Hi please help me with this website. This website is used to list 6 events and then it should accurately countdown to when that event happens. As it is right now it accurately counts days, but hours, minutes, and seconds are counted down incorrectly. Here is the js file:
/*
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";
}
Here is the 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>
Please tell me what I need to do to make all of them countdown properly and tell me what technique I can use in the future to do this for future websites in case I need to countdown to 30 events. I would appreciate any help.
/*
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";
}
Here is the 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>
Please tell me what I need to do to make all of them countdown properly and tell me what technique I can use in the future to do this for future websites in case I need to countdown to 30 events. I would appreciate any help.
Comment