HTML For A Countdown Clock

sarge7us · #1 07-21-2003, 02:20 PM

I would like to add a countdown clock that says, x number of days until "an event", to a webpage. Can anyone help with the html for creating an item like that on a webpage?

mvieke · #2 07-21-2003, 02:45 PM

Here's some code I found

Code:

<HTML>
<HEAD>
<TITLE>Project: NetSite...JavaScript Countdown Clock</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// AUTHOR:          Patrick Fairfield
//                    www.FairfieldConsulting.com   
//                    Based heavily on:
//                    Maxim V. Kollegov, All Rights Reserved.
//              http://www.geocities.com/SiliconValley/Lakes/8620
//              Modified with permission by Joe Hage - Team ScriptBuilder
//              Feel free to reuse this code provided you include this
//              AUTHOR section in your pages.
// DESC:        Display a ticking countdown clock on your web page.
// Sample HTML: COUNTDOWN.HTML
// PLATFORMS:   Netscape Navigator 3.0 and higher,
//                   Microsoft Internet Explorer 3.02 and higher
// ======================================================================
//change your event date event here.

var eventdate = new Date("December 25, 2003 23:59:59");

function toSt(n) {
 s=""
 if(n<10) s+="0"
 return s+n.toString();
}

function countdown() {
 cl=document.clock;
 d=new Date();
 count=Math.floor((eventdate.getTime()-d.getTime())/1000);
 if(count<=0)
   {cl.days.value ="----";
    cl.hours.value="--";
    cl.mins.value="--";
    cl.secs.value="--";
    return;
  }
 cl.secs.value=toSt(count%60);
 count=Math.floor(count/60);
 cl.mins.value=toSt(count%60);
 count=Math.floor(count/60);
 cl.hours.value=toSt(count%24);
 count=Math.floor(count/24);
 cl.days.value=count;    
 
 setTimeout("countdown()",500);
}
// end hiding script-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000A0" ALINK="#FF0000" VLINK="#800000" onLoad="countdown()">

<!-- Insert HTML here -->


<FONT FACE="arial, helvetica" SIZE="-1">
<H2 ALIGN=CENTER><FONT FACE="arial, helvetica" COLOR="#800000">JavaScript Countdown Clock</FONT></H2>
<CENTER>
<P>
<FORM name="clock">
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=0 BGCOLOR="#000000">
    <TR>
         <TD ALIGN=CENTER WIDTH="31%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Days:</B></FONT></TD>
         <TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Hours:</B></FONT></TD>
         <TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Mins:</B></FONT></TD>
         <TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Secs:</B></FONT></TD>
    </TR>
    <TR>
         <TD ALIGN=CENTER><INPUT name="days" size=4></TD>
         <TD ALIGN=CENTER><INPUT name="hours" size=2></TD>
         <TD ALIGN=CENTER><INPUT name="mins" size=2></TD>
         <TD ALIGN=CENTER><INPUT name="secs" size=2></TD>
    </TR>
    <TR>
         <TD COLSPAN="4" BGCOLOR="#000080">
              <CENTER><P><FONT FACE="arial,helvetica" SIZE="+2" COLOR="#FFFF00">Until</FONT></CENTER>
         </TD>
    </TR>
    <TR>
         <TD COLSPAN="4" BGCOLOR="#000000">
              <CENTER><P><FONT COLOR="#00FF00" SIZE=+1>
              <SCRIPT LANGUAGE="JavaScript">
              <!--
              document.write(" " + eventdate.toLocaleString() + " ");
              // end hiding script-->
              </SCRIPT>
              </FONT>
              </CENTER>
         </TD>
    </TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>

sarge7us · #3 07-21-2003, 04:25 PM

Thanks for the info but that is way too long for my webpage with the credits and all. Does anyone else know of any other html for placing a countdown clock on a webpage?

sbhmf · #4 07-21-2003, 04:28 PM

you need server-side scripting if you want to do it.

sarge7us · #5 07-23-2003, 09:14 PM

What is server side scripting and how, where can I get it?

mvieke · #6 07-23-2003, 11:11 PM

You don't need server-side scripting. It would be much more simple to implement a javascript based solution.

Why not modify the code I posted earlier? It has all the componets. I'm sure it wouldn't be difficult to change.

Do you want someone to do the work for you? If so, Paypal me $20 and I'll take care of it.

vpn · #7 07-24-2003, 12:04 AM

mvieke, chill with your little advertising pay me ill do it bit.. this forum is to give free help, not offer to code for money..

sarge7us, i modified the code above, just copy and paste whats below into your page:

Copy and paste this between your <head> tags:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Paste this where you want the countdown to appear:

<FORM name="clock">
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=0 BGCOLOR="#000000">
<TR>
<TD ALIGN=CENTER WIDTH="31%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Days:</B></FONT></TD>
<TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Hours:</B></FONT></TD>
<TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Mins:</B></FONT></TD>
<TD ALIGN=CENTER WIDTH="23%" BGCOLOR="#000080"><FONT COLOR="#FFFFFF"><B>Secs:</B></FONT></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT name="days" size=4></TD>
<TD ALIGN=CENTER><INPUT name="hours" size=2></TD>
<TD ALIGN=CENTER><INPUT name="mins" size=2></TD>
<TD ALIGN=CENTER><INPUT name="secs" size=2></TD>
</TR>
<TR>
<TD COLSPAN="4" BGCOLOR="#000080">
<CENTER><P><FONT FACE="arial,helvetica" SIZE="+2" COLOR="#FFFF00">Until</FONT></CENTER>
</TD>
</TR>
<TR>
<TD COLSPAN="4" BGCOLOR="#000000">
<CENTER><P><FONT COLOR="#00FF00" SIZE=+1>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</FONT>
</CENTER>
</TD>
</TR>
</TABLE>
</FORM>

Add the following to your <body> tag:

onLoad="countdown()"

It Should then look like:

<body onLoad="countdown()">

Now, go back up between your <head> tags, and you will see a line that looks like

var eventdate = new Date("December 25, 2003 23:59:59");

Change that to your date, then you're done.

mvieke · #8 07-24-2003, 09:55 AM

I apologize if my shameless self promotion offended anyone, but my code was a lot more elegant and worth every bit of 20 bucks.

I just get frustrated with people that ask for help. We give them a good solution, and they dont even try it. Everything that sarge7us needed was in the script. It would take a couple more lines to get the desired output.

sarge7us · #9 07-24-2003, 11:39 AM

VPN thanks for the modified codeing. I entered everything and the countdown clock is on the page but there aren't any numbers on it and it isn't counting down to the date. I modified the event title and also modified the var event date. Sorry to keep asking about this clock but i am new to this whole html thing. What do I need to do to get the numbers and the countdown action on the clock. Thanks for your help and patience with this. Also, under the until event title of the clock there is a line showing on page that says LANGUAGE= "JavaScript"></SCRIPT> Why is that showing?

sbhmf · #10 07-24-2003, 12:27 PM

server-side scripting is necessary if all users are to see the same date/time. after all.... it is a countdown!

without server-side scripting you can only achieve a date that is based on the visitor's computer. since visitors are in different time zones, some will have reached the countdown date while others have not.

sarge7us · #11 07-24-2003, 12:49 PM

What is server side scripting and how do I get it? Also, how do I use it with html codeing that I already have?

babradley · #12 07-24-2003, 01:10 PM

Unfortunately, sbhmf is right, you will need to do this on the server side so that you use the clock on the server not from the client's machine. You will need to find out what languages are used on your host's server.

I know that you can do what you want using ColdFusion and I am sure it is possible with ASP. Not sure about PHP, but is seems like a really powerful language so I am sure you can do it with that as well.

Hope that helps.

mvieke · #13 07-24-2003, 04:41 PM

You still do not need server side scripting. If everyone across the globe has to know exactly when this even occurs, you can use GMT (Greenwich Mean Time).

The getTimezoneOffset function will give you an offset of the users time relative to Greenwich Mean Time. You just need to determine when the event occurs relative to GMT.

<script language="javascript"></script>

sarge7us · #14 07-25-2003, 08:13 AM

VPN thanks for the modified codeing. I entered everything and the countdown clock is on the page but there aren't any numbers on it and it isn't counting down to the date. I modified the event title and also modified the var event date. Sorry to keep asking about this clock but i am new to this whole html thing. What do I need to do to get the numbers and the countdown action on the clock. Thanks for your help and patience with this. Also, under the until event title of the clock there is a line showing on page that says LANGUAGE= "JavaScript"></SCRIPT> Why is that showing?

I have a countdown clock on my page but it has no numbers on it and it isn't counting down. What's wrong? I have been able to modify the event date and event title as well as font type and colors but. What do I need to do for the numbers and countdown action?

yas · #15 07-25-2003, 01:36 PM

Hello

Why dont you try this code

Code:

<center>
<font color="gold"size="5">
<b>
Only
<font color="red"size="6">
<SCRIPT LANGUAGE = "JavaScript">
var now = new Date();
// set this value to the countdown date.
var then = new Date("July 5, 2003");
var gap = then.getTime() - now.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24));
document.write(gap);
</SCRIPT>
<font color="gold"size="5">
 days until the
<br>
4th of July, 2003
</b>
</center>
</font>

I got this 4rm http://www.angelfire.com/mt/jdhardball/clocks.html
There should be a few more there if you dont like this one

Cool huh