Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

javascript question


  • Please log in to reply

#1
pomp

pomp

    the man

  • Member
  • PipPipPipPip
  • 1,366 posts
I'm trying to put countdowns on a site. There's three I want to put on it.

I can't seem to get three to work on the same page.

This is what is in the <body> part of the page:
<script type="text/javascript">countdown_clock(05, 06, 17, 18, 60, 1);</script>

This is what produces the output, it's within the javascript in the <head> section:
document.all.countdown.innerHTML = days + ' day' + dps + ' ';
                    document.all.countdown.innerHTML += hours + ' hour' + hps + ' ';
                    document.all.countdown.innerHTML += '<font color=blue>' + minutes + ' minute' + mps + ' and ';
                    document.all.countdown.innerHTML += seconds + ' second' + sps;
                    break;
               default: 
                    document.all.countdown.innerHTML = Time_Left + ' seconds';               }

It just won't let me do other countdowns, just only one on the page, if someone knows how to be able to output more than one countdown, I'd appreciate some input, thanks!
  • 0

Advertisements


#2
bdlt

bdlt

    Member

  • Member
  • PipPipPip
  • 875 posts
You may need to create 3 different instances of document.all.countdown.innerHTML.

Copy the block of code 2 more times replacing document.all.countdown.innerHTML with document.all.countdown.innerHTML2 in one block. Replace document.all.countdown.innerHTML with document.all.countdown.innerHTML 3 in the 3rd block.

Find other occurances of document.all.countdown.innerHTML. There should be at least one in the original code. If you have only one occurance, copy that line 2 more times and change document.all.countdown.innerHTML to document.all.countdown.innerHTML2 and document.all.countdown.innerHTML3 on the new lines.

Does this make any sense?
  • 0

#3
pomp

pomp

    the man

  • Topic Starter
  • Member
  • PipPipPipPip
  • 1,366 posts
No i really don't understand.

This is the code.

<html>

<head>
<script language="javascript">
<!--
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.getYear() - 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 + '&nbsp&nbsp&nbsp&nbsp day' + dps + ' ' + '<br \>';
                    document.all.countdown.innerHTML += hours + ' &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp hour' + hps + ' ' + '<br \>';
                    document.all.countdown.innerHTML += minutes + ' &nbsp minute' + mps + '<br \>';
                    document.all.countdown.innerHTML += seconds + '&nbsp 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>
Countdown to our graduation!:
<br>
<br>
<script type="text/javascript">countdown_clock(05, 06, 17, 18, 60, 1);</script>
</body>
</html>

  • 0

#4
bdlt

bdlt

    Member

  • Member
  • PipPipPip
  • 875 posts
setTimeout() is limiting this code to one countdown. However, countdown() can be changed to display more than one countdown.

do you want:
3 different countdowns using format 1?
OR 1 countdown in 3 different formats?
OR something different?
  • 0

#5
bdlt

bdlt

    Member

  • Member
  • PipPipPip
  • 875 posts
here's 3 countdowns with the same format. Set the target date in fill_doc().

<html>

<head>
<script language="javascript">
<!--
var Todays_Date;
function todays_date()
{
Today = new Date();
Todays_Year = Today.getYear() - 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();
}
function countdown_clock()
{
//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();
}
function fill_doc(year, month, day, hour, minute)
{
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;

//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 + '&nbsp&nbsp&nbsp&nbsp day' + dps + ' ' + '<br \>';
document.all.countdown.innerHTML += hours + ' &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp hour' + hps + ' ' + '<br \>';
document.all.countdown.innerHTML += minutes + ' &nbsp minute' + mps + '<br \>';
document.all.countdown.innerHTML += seconds + '&nbsp second' + sps;
}
function countdown()
{
todays_date();
document.all.countdown.innerHTML = "";

fill_doc(05, 06, 17, 18, 60);
document.all.countdown.innerHTML += '<br><br>';
fill_doc(06, 07, 17, 18, 60);
document.all.countdown.innerHTML += '<br><br>';
fill_doc(05, 03, 22, 3, 01);

//Recursive call, keeps the clock ticking.
setTimeout('countdown();', 1000);
}
--></script>
</head>

<body>
Countdown to our graduation!:
<br>
<br>
<script type="text/javascript">countdown_clock();</script>
</body>
</html>
  • 0

#6
pomp

pomp

    the man

  • Topic Starter
  • Member
  • PipPipPipPip
  • 1,366 posts
Thank you!! It worked now!!

This is the link to the site with the countdowns on it:

http://www.geocities...de85/test1.html

this is now the code for it:
<html>

<head>
<script language="javascript">
<!--
var Todays_Date;
function todays_date()
{
Today = new Date();
Todays_Year = Today.getYear() - 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();
}
function countdown_clock()
{
//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(); 
} 
function fill_doc(year, month, day, hour, minute)
{
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;

//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 + '&nbsp&nbsp&nbsp&nbsp day' + dps + ' ' + '<br \>';
document.all.countdown.innerHTML += hours + ' &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp hour' + hps + ' ' + '<br \>';
document.all.countdown.innerHTML += minutes + ' &nbsp minute' + mps + '<br \>';
document.all.countdown.innerHTML += seconds + '&nbsp second' + sps;
}
function countdown()
{
todays_date();
document.all.countdown.innerHTML = 'Senior Graduation:<br><br>';
fill_doc(05, 06, 17, 18, 00);
document.all.countdown.innerHTML += '<br><br>' + 'Senior Trip:<br><br>';
fill_doc(05, 04, 15, 03, 00);
document.all.countdown.innerHTML += '<br><br>' + 'Senior Prom:<br><br>';
fill_doc(05, 06, 04, 19, 00); 

//Recursive call, keeps the clock ticking.
setTimeout('countdown();', 1000);
}
--></script>
</head>

<body>

<script type="text/javascript">countdown_clock();</script>
</body>
</html>

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP