Wanted: Simple Countdown Timer Code

[BLazeD]

Hi there

I am just wondering if anyone is able to provide me with the code (PHP or HTML) for a text countdown timer.

The text will simply be:



? days, ? hours, ? minutes, and ? seconds until ....




I would prefer that the numbers (?) actually count down on the page (PHP?), or if they only give a value at the time the page is loaded (HTML?).

I have tried for the last hour to get one going, and I have, but it gives errors (java errrors).

Thanks for any help!

 

[stscac]

Hey Matt

I got something for you. Although I cannot take credit for writing this, it does look pretty neat

Its definitely not php, because once php loads on a page, it has no more interactions with the server, thus cannot (as far as I know) continue to countdown without the help of a client side application.

That is where the lovely javascript comes in. The following is copy and paste code from http://scripts.franciscocharrua.com/countdown-clock.php and should be saved as an external js file (countdown.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.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 + ' day' + dps + ' ';
                    document.all.countdown.innerHTML += hours + ' hour' + hps + ' ';
                    document.all.countdown.innerHTML += minutes + ' minute' + mps + ' and ';
                    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);
         }

Once the file has been saved, you are going to want to call the file by placing the following code in the header of the HTML page in which you want the countdown to appear.

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

Now, find the spot in your HTML document where you want the countdown to appear. Place the following code in the exact spot within the HTML code where you want to countdown to appear.

    <script language="JavaScript">
    <!--
       var now = new Date();
       var uaid = now.getTime() % Math.floor(8640000 - math.random()*1000);
    //-->
    </script>

And Poof! You got it!

A custom countdown. You can then style it with CSS, which is fairly standard.

Let me know if you need anything else

:gl: Good luck

-Steve

 

[BLazeD]

Cheers dude - will give it a shot. I already have some javascript for other stuff in my header, and everytime I try a method like above, that involves adding more javascript to my header - it never works.

I will try and figure it out, but dont expect much luck

 

[stscac]

Haven't heard anything to see if it does indeed work.

Would be nice to let other users know if it did indeed work and what your environment was.

Thanks

-Steve

 

[BLazeD]

Yup, it never worked

I think it conficts with other stuff in my header