PDA

View Full Version : Countdown script is off two days...



l337godd3ss
Feb 9th, 2005, 03:31 AM
Hi, I have a countdown script that is not working right. For some odd reason, it is two days off. It is supposed to be counting down to March 18, and it says that there are 40 days left. There are only supposed to be 38 days left though.

Any idea why this is happening?? Here's the code:


Code for inserting countdown script:

<script type="text/javascript">countdown_clock(05, 03, 18, 05, 30, 1);</script>

counter.js


function countdown_clock(year, month, day, hour, minute, format)
{
//I chose a div as the container for the timer, but
//it can be an input tag inside a form, or anything
//who's displayed content can be changed through
//client-side scripting.
html_code = '<div id="countdown"></div>';

document.write(html_code);

countdown(year, month, day, hour, minute, format);
}

function countdown(year, month, day, hour, minute, format)
{
Today = new Date();
Todays_Year = Today.getFullYear();
Todays_Month = Today.getMonth();

//Convert both today's date and the target date into miliseconds.
Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(),
Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();
Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime();

//Find their difference, and convert that into seconds.
Time_Left = Math.round((Target_Date - Todays_Date) / 1000);

if(Time_Left < 0)
Time_Left = 0;

switch(format)
{
case 0:
//The simplest way to display the time left.
document.all.countdown.innerHTML = Time_Left + ' seconds';
break;
case 1:
//More datailed.
days = Math.floor(Time_Left / (60 * 60 * 24));
Time_Left %= (60 * 60 * 24);
hours = Math.floor(Time_Left / (60 * 60));
Time_Left %= (60 * 60);
minutes = Math.floor(Time_Left / 60);
Time_Left %= 60;
seconds = Time_Left;

dps = 's'; hps = 's'; mps = 's'; sps = 's';
//ps is short for plural suffix.
if(days == 1) dps ='';
if(hours == 1) hps ='';
if(minutes == 1) mps ='';
if(seconds == 1) sps ='';

document.all.countdown.innerHTML = days + ' day' + dps + '<br>';
document.all.countdown.innerHTML += hours + ' hour' + hps + '<br>';
document.all.countdown.innerHTML += minutes + ' minute' + mps + '<br>';
document.all.countdown.innerHTML += seconds + ' second' + sps;
break;
default:
document.all.countdown.innerHTML = Time_Left + ' seconds';
}

//Recursive call, keeps the clock ticking.
setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
}


Thanks!!

l337godd3ss
Feb 9th, 2005, 11:43 PM
Could the fact that February only has 28 days be messing up the countdown?? Just trying to think of possible reasons...please reply if you know what might be wrong!!!

jmccaskill
Feb 10th, 2005, 02:44 PM
<script type="text/javascript">countdown_clock(05, 03, 18, 05, 30, 1);</script>
This counts down to April. If you want to count down to March, you have to use

<script type="text/javascript">countdown_clock(05, 02, 18, 05, 30, 1);</script>
Also, in counter.js, you have

Todays_Month = Today.getMonth() + 1;
You shouldn't be adding 1. You need to just have

Todays_Month = Today.getMonth();
Date.getMonth() returns 0 for January, 1 for February, etc.

Also, a few recommendations. Use Date.getFullYear() as it is, instead of subtracting 2000 from it. Use document.getElementById("countdown") instead of document.all.countdown. And since this seems to be something that is going to execute every second, setInterval is probably a better function to use than setTimeout.

l337godd3ss
Feb 11th, 2005, 01:11 AM
Alright, I fixed the month and the year parts of the code, but I still have to use 03 for March. If I use 02, it counts down to February 18.

I'm still having the problem with the countdown being two days off. It should say 36 days, but it says 38 days.

Also: how do I use the setInterval function?? I don't know javascript very well (I know little to nothing).

Thanks so much for your help!!! :)



<script type="text/javascript">countdown_clock(05, 03, 18, 05, 30, 1);</script>




function countdown_clock(year, month, day, hour, minute, format)
{
//I chose a div as the container for the timer, but
//it can be an input tag inside a form, or anything
//who's displayed content can be changed through
//client-side scripting.
html_code = '<div id="countdown"></div>';

document.write(html_code);

countdown(year, month, day, hour, minute, format);
}

function countdown(year, month, day, hour, minute, format)
{
Today = new Date();
Todays_Year = Today.getFullYear() - 2000;
Todays_Month = Today.getMonth() + 1;

//Convert both today's date and the target date into miliseconds.
Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(),
Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();
Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime();

//Find their difference, and convert that into seconds.
Time_Left = Math.round((Target_Date - Todays_Date) / 1000);

if(Time_Left < 0)
Time_Left = 0;

switch(format)
{
case 0:
//The simplest way to display the time left.
document.all.countdown.innerHTML = Time_Left + ' seconds';
break;
case 1:
//More datailed.
days = Math.floor(Time_Left / (60 * 60 * 24));
Time_Left %= (60 * 60 * 24);
hours = Math.floor(Time_Left / (60 * 60));
Time_Left %= (60 * 60);
minutes = Math.floor(Time_Left / 60);
Time_Left %= 60;
seconds = Time_Left;

dps = 's'; hps = 's'; mps = 's'; sps = 's';
//ps is short for plural suffix.
if(days == 1) dps ='';
if(hours == 1) hps ='';
if(minutes == 1) mps ='';
if(seconds == 1) sps ='';

document.all.countdown.innerHTML = days + ' day' + dps + '<br>';
document.all.countdown.innerHTML += hours + ' hour' + hps + '<br>';
document.all.countdown.innerHTML += minutes + ' minute' + mps + '<br>';
document.all.countdown.innerHTML += seconds + ' second' + sps;
break;
default:
document.all.countdown.innerHTML = Time_Left + ' seconds';
}

//Recursive call, keeps the clock ticking.
setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
}

Basscyst
Feb 11th, 2005, 01:38 AM
This seems to be doing the job:



<html>
<head>
<script type="text/javascript">
function countdown(year, month, day, hour, minute, format)
{
Today=new Date();
Todays_Year=Today.getFullYear()-2000;
Todays_Month=Today.getMonth()+1;

//Convert both today's date and the target date into miliseconds.
Todays_Date=(new Date(Todays_Year,Todays_Month,Today.getDate(),Today.getHours(),Today.getMinutes(),Today.getSeconds() )).getTime();
Target_Date=(new Date(year,month,day,hour,minute,00)).getTime();

//Find their difference, and convert that into seconds.
Time_Left=Math.round((Target_Date-Todays_Date)/1000);

if(Time_Left<0)
{
Time_Left=0;
}
switch(format)
{
case 0:
//The simplest way to display the time left.
document.all.countdown.innerHTML = Time_Left + ' seconds';
break;
case 1:
//More datailed.
days = Math.floor(Time_Left/(60*60*24));
Time_Left %=(60*60*24);
hours=Math.floor(Time_Left/(60*60));
Time_Left %=(60 * 60);
minutes = Math.floor(Time_Left / 60);
Time_Left %=60;
seconds=Time_Left;

dps='s'; hps='s';mps='s';sps='s';
//ps is short for plural suffix.
if(days==1)
{
dps ='';
}
if(hours==1)
{
hps ='';
}
if(minutes==1)
{
mps ='';
}
if(seconds==1)
{
sps ='';
}
document.all.countdown.innerHTML = days + ' day' + dps + '<br>';
document.all.countdown.innerHTML += hours + ' hour' + hps + '<br>';
document.all.countdown.innerHTML += minutes + ' minute' + mps + '<br>';
document.all.countdown.innerHTML += seconds + ' second' + sps;
break;

default:
document.all.countdown.innerHTML = Time_Left + ' seconds';
}

//Recursive call, keeps the clock ticking.
setTimeout('countdown('+year+','+month+','+day+','+hour+','+minute+','+format+');',1000);
}
</script>
</head>
<body onload="countdown(05,03,16,05,30,1);">
<div id="countdown">
</div>
</body>
</html>



Basscyst

l337godd3ss
Feb 11th, 2005, 03:18 AM
Great!! That works perfectly!!

But...now I have kind of a silly question to ask...how would I make that into a .js file and insert it into my page? Rather, what code should I use to insert it into my page?

Thanks!! :)

Basscyst
Feb 11th, 2005, 07:08 AM
Copy the script to another file, without the <script> tags, leave them there. Name the file countdown.js and save it in the same directory as your HTML file. Then make the <script> tag of your current document look like this:



<script type="text/javascript" src="countdown.js"></script>


Basscyst

l337godd3ss
Feb 11th, 2005, 01:21 PM
It isn't showing up. What am I doing wrong? Here's what I did in my webpage:



<html>
<head>
<script type="text/javascript" src="../countdown/countdown.js"></script>
<STYLE type="text/css">
<!--
A:link {text-decoration:none ; color:#000000 }
A:visited {text-decoration:none ; color:#000000 }
A:active {text-decoration:underline; color:#000000 }
A:hover {text-decoration:underline; color:#000000 }
-->
<!--
.counter
{
font-family:verdana, arial;
color:251F1F;
font-size:x-small;
padding-left: 15px;
}
-->
</STYLE>
</head>

<body bgcolor="#1C2D6D" style="margin:0; padding:0;">

body content...

<div class="counter">
<br>
<script type="text/javascript">countdown(05, 03, 18, 05, 30, 1);</script>
</font>
</div>


Thanks again!

Basscyst
Feb 11th, 2005, 05:44 PM
You need to remove this line:



<script type="text/javascript">countdown(05, 03, 18, 05, 30, 1);</script>


Add this to the body tag:



onload="countdown(05,03,16,05,30,1);">


Then you need to name your <div> "countdown".

That should do it.

Basscyst

l337godd3ss
Feb 11th, 2005, 11:52 PM
Thanks Basscyst!! Everything works perfectly now!!! :)

l337godd3ss
Feb 12th, 2005, 03:59 PM
Oh, I just noticed something, Basscyst...in the code for the fixed countdown, you subtracted two days from the date that the script was counting down to. In order for the script to work, will I have to do this every time I use the script??

Also, do you know why this happens? Is there a reason that the script adds two days onto the countdown and has to be 'tricked' in ordr to work?

Thanks!

Basscyst
Feb 12th, 2005, 06:27 PM
eh, I honestly didn't look into it too much, nor do I see where I subtracted 2. I do recall thinking about doing so though, so it's possible. I just don't see it in the code I posted.

The code I posted still seems to be working though. . .:confused:

Basscyst

l337godd3ss
Feb 13th, 2005, 01:21 AM
Right here:

<body onload="countdown(05,03,16,05,30,1);">

you wrote 16 instead of 18, so the countdown clock wouldn't be two days off. :)

jmccaskill
Feb 14th, 2005, 03:03 PM
Right here:

<body onload="countdown(05,03,16,05,30,1);">

you wrote 16 instead of 18, so the countdown clock wouldn't be two days off. :)

This is what I told you before. What you intend is to count down from today, until your target date. In your script you are adding 1 to Date.getMonth. So what you are actually doing is counting down from one month from today, until one month from the target date. That is why the count is off. If you want the script to do what you intend, you have to use it correctly (no offense meant, I just hate smilies, and given the choice between using a smilie and writing out what amounts to a dissertation explaining what I mean, I'll write the dissertation).

In my first response I gave some suggestions on how to modify your code. This time I just made the modifications. It works for me, but if it gives you any problems, don't hesitate.


<html>
<head>
<script type="text/javascript">
function countdown(year, month, day, hour, minute, format)
{
var Today = new Date();
var Todays_Year = Today.getFullYear();
var Todays_Month = Today.getMonth();

//Convert both today's date and the target date into miliseconds.
var Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();
var Target_Date = (new Date(year, month, day, hour, minute, 0)).getTime();

//Find their difference, and convert that into seconds.
var Time_Left = Math.round((Target_Date - Todays_Date) / 1000);

if(Time_Left < 0)
{
Time_Left = 0;
}
switch(format)
{
case 0:
//The simplest way to display the time left.
document.getElementById("countdown").innerHTML = Time_Left + ' seconds';
break;
case 1:
//More datailed.
days = Math.floor(Time_Left / (60 * 60 * 24));
Time_Left %= (60 * 60 * 24);
hours = Math.floor(Time_Left / (60 * 60));
Time_Left %= (60 * 60);
minutes = Math.floor(Time_Left / 60);
Time_Left %= 60;
seconds = Time_Left;

dps = 's'; hps = 's'; mps = 's'; sps = 's';
//ps is short for plural suffix.
if(days == 1)
{
dps = '';
}
if(hours == 1)
{
hps = '';
}
if(minutes == 1)
{
mps = '';
}
if(seconds == 1)
{
sps = '';
}
document.getElementById("countdown").innerHTML = days + ' day' + dps + '<br>';
document.getElementById("countdown").innerHTML += hours + ' hour' + hps + '<br>';
document.getElementById("countdown").innerHTML += minutes + ' minute' + mps + '<br>';
document.getElementById("countdown").innerHTML += seconds + ' second' + sps;
break;

default:
document.getElementById("countdown").innerHTML = Time_Left + ' seconds';
}

//Recursive call, keeps the clock ticking.
setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
}
</script>
</head>
<body onload="countdown(2005, 2, 18, 5, 30, 1);">
<div id="countdown">
</div>
</body>
</html>

l337godd3ss
Feb 15th, 2005, 12:29 AM
Sorry, jmccaskill, I misunderstood what you told me to do. I changed everything you told me to, except that I didn't understand how to do a few of your suggestions and probably changed things wrongly. Now I understand why the script wasn't working; before I didn't completely understand that the script was adding 1 to every month value.

Now the script works perfectly, thanks!!

jmccaskill
Feb 15th, 2005, 02:30 PM
No worries. I'm glad to have helped, and more so that you understand the changes. Give a man a fish....