Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

javascript question

Started by pomp , Mar 20 2005 02:12 PM

  • Please log in to reply

#1
pomp
Posted 20 March 2005 - 02:12 PM

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
Posted 20 March 2005 - 03:06 PM

bdlt

    Member

  • Member
  • PipPipPip
  • 876 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
Posted 20 March 2005 - 10:30 PM

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
Posted 21 March 2005 - 12:32 AM

bdlt

    Member

  • Member
  • PipPipPip
  • 876 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
Posted 21 March 2005 - 02:57 AM

bdlt

    Member

  • Member
  • PipPipPip
  • 876 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
Posted 21 March 2005 - 01:06 PM

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
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP