B
Bonnett
I have been creating a generic countdown timer (source code below), counting
the seconds, minutes, hours and days till an event, but I have having
trouble with it finding out how many hours are left. When i get it to
display a complete countdown (days hours mins seconds left) it is one hour
short when counting dates that fall in the following time brackets:
2004,2,29 -> 2004,9,31
2005,2,28 -> 2005,9,30
2006,2,27 -> 2006,9,29
etc..
I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
and the problem always occurs. Is this a bug in javascript, or just my bad
mathematics in finding the modulo value.
Source code:
<HTML>
<HEAD>
<TITLE>JavaScript Countdown</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--
<!-- Basic Countdown Timer//-->
<!-- By Peter Bonnett ([email protected]) //-->
<!-- http://uk.geocities.com/peterbonnett //-->
var theTime="";
var type = "theLot"//Default is the lot
function getType(){
if (document.theForm.changeType[0].checked) {
type = "seconds"
}
else if (document.theForm.changeType[1].checked) {
type = "mins"
}
else if (document.theForm.changeType[2].checked) {
type = "hours"
}
else if (document.theForm.changeType[3].checked) {
type = "days"
}
else if (document.theForm.changeType[4].checked) {
type = "theLot"
}
}
function showTheTime() {
getType();//See what radio button is checked
now = new Date
next = new Date(2004,2,8); //Date you are counting down to
if(type=="seconds"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/1000)+" seconds"; //Set text to
show seconds left
}
else if(type=="mins"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60))+" mins"; //Set text to
show minutes left
}
else if(type=="hours"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60*60))+" hours"; //Set text
to show hours left
}
else if(type=="days"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60*60*24))+" days"; //Set
text to show days left
}
else if(type=="theLot"){
days = parseInt((next.getTime() - now.getTime())/(1000*60*60*24));
//Calculation to get the days
hrsLeft = parseInt((next.getTime() -
now.getTime())/(1000*60*60))%24;//Calculation to get the hours left
minsLeft = parseInt((next.getTime() -
now.getTime())/(1000*60))%60;//Calculation to get the minutes left
secsLeft = parseInt((next.getTime() -
now.getTime())/(1000))%60;//Calculation to get the seconds left
document.getElementById("countdown").innerHTML = days + " days " + hrsLeft
+ " hours " + minsLeft + " minutes " + secsLeft +" seconds. ";
}
setTimeout("showTheTime()",1000)
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE onLoad="showTheTime()">
<DIV ID="countdown"><!-- Where the time left is displayed//--></DIV>
<FORM NAME="theForm">
Choose type:
<INPUT TYPE=RADIO NAME="changeType">Seconds
<INPUT TYPE=RADIO NAME="changeType">Minutes
<INPUT TYPE=RADIO NAME="changeType">Hours
<INPUT TYPE=RADIO NAME="changeType">Days
<INPUT TYPE=RADIO NAME="changeType" CHECKED>The Lot
</FORM>
</BODY>
</HTML>
the seconds, minutes, hours and days till an event, but I have having
trouble with it finding out how many hours are left. When i get it to
display a complete countdown (days hours mins seconds left) it is one hour
short when counting dates that fall in the following time brackets:
2004,2,29 -> 2004,9,31
2005,2,28 -> 2005,9,30
2006,2,27 -> 2006,9,29
etc..
I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
and the problem always occurs. Is this a bug in javascript, or just my bad
mathematics in finding the modulo value.
Source code:
<HTML>
<HEAD>
<TITLE>JavaScript Countdown</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--
<!-- Basic Countdown Timer//-->
<!-- By Peter Bonnett ([email protected]) //-->
<!-- http://uk.geocities.com/peterbonnett //-->
var theTime="";
var type = "theLot"//Default is the lot
function getType(){
if (document.theForm.changeType[0].checked) {
type = "seconds"
}
else if (document.theForm.changeType[1].checked) {
type = "mins"
}
else if (document.theForm.changeType[2].checked) {
type = "hours"
}
else if (document.theForm.changeType[3].checked) {
type = "days"
}
else if (document.theForm.changeType[4].checked) {
type = "theLot"
}
}
function showTheTime() {
getType();//See what radio button is checked
now = new Date
next = new Date(2004,2,8); //Date you are counting down to
if(type=="seconds"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/1000)+" seconds"; //Set text to
show seconds left
}
else if(type=="mins"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60))+" mins"; //Set text to
show minutes left
}
else if(type=="hours"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60*60))+" hours"; //Set text
to show hours left
}
else if(type=="days"){
document.getElementById("countdown").innerHTML =
parseInt((next.getTime() - now.getTime())/(1000*60*60*24))+" days"; //Set
text to show days left
}
else if(type=="theLot"){
days = parseInt((next.getTime() - now.getTime())/(1000*60*60*24));
//Calculation to get the days
hrsLeft = parseInt((next.getTime() -
now.getTime())/(1000*60*60))%24;//Calculation to get the hours left
minsLeft = parseInt((next.getTime() -
now.getTime())/(1000*60))%60;//Calculation to get the minutes left
secsLeft = parseInt((next.getTime() -
now.getTime())/(1000))%60;//Calculation to get the seconds left
document.getElementById("countdown").innerHTML = days + " days " + hrsLeft
+ " hours " + minsLeft + " minutes " + secsLeft +" seconds. ";
}
setTimeout("showTheTime()",1000)
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE onLoad="showTheTime()">
<DIV ID="countdown"><!-- Where the time left is displayed//--></DIV>
<FORM NAME="theForm">
Choose type:
<INPUT TYPE=RADIO NAME="changeType">Seconds
<INPUT TYPE=RADIO NAME="changeType">Minutes
<INPUT TYPE=RADIO NAME="changeType">Hours
<INPUT TYPE=RADIO NAME="changeType">Days
<INPUT TYPE=RADIO NAME="changeType" CHECKED>The Lot
</FORM>
</BODY>
</HTML>