Multi-Display Clock ~ Time,~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

This is a multi-display clock with local time, UTC time, local/UTC decimal time, UMT, hex time, Swatch Internet Time, New Earth Time, and a countdown clock.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked in IE, Opera9.0 and AOL Explorer1.2 only. All other platforms tested you will see the effect attempting to load (by seeing the word "Loading" eleven (11) times for the eleven different functions) but you will "Not" see the effect. It degrades well and you will not get any error messages.

Depending on your knowledge of HTML and java scripts, this is an easy, three (3) part copy and paste code with minimal reconfigurations.

Copy/Cut & Paste the coding into the <HEAD> section (2 parts) of your HTML document.

Add the onLoad event handler directly into the <BODY> tag.

Copy/Cut & paste the coding anywhere into the <BODY> section (No reconfigurations) of your HTML document you want the effect to appear.

I f you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default Complete <BODY> Tag ~ No onload event handler

Reconfigured Complete <BODY> Tag ~ onload Event Handler Inserted

The below <HEAD> section has for all intensive purposes two (2) separate parts.

CSS Style Sheet - Reconfigurations for font and background color
Javascript Section - Reconfigurations for countdown effect

Define Reconfigurations For CSS Style Sheet

background-color: #fff; - The background color of the effect. #fff is the three (3) digit HEX code for white
color: #000; - is the font color for the effect. #000 is the three (3) digit HEX code for black
[ Three (3) Digit Hex Codes ]

//Countdown
var cyear = 2008; // enter 4-digit year
var cmonth = 0; // 0 for January, 1 for February ... 11 for December
var cdate = 1; // day of the month
var chours = 0; // 24-hour only
var cminutes = 0;
var cseconds = 0;
var cms = 0; // milliseconds

var description = "New Year's 2008";
var future = new Date(cyear,cmonth,cdate,chours,cminutes,cseconds,cms);

Define Above Areas Of Reconfiguration

var cyear = 2008; - This is the year to count down to
var cmonth = 0; - This is the month of the year to count down to
var cdate = 1; - This is the day of the month to count down to
var description = "New Year's 2008"; - This is the event you are counting down to

If this is a little unclear, see if this makes more sense. The day and date you want to countdown to is February, 7, 2007. This is Consigliere's Birthday. He will be turning 58 years young in the year 2007. You would reconfigure it to look like the below.

//Countdown
var cyear = 2007; // enter 4-digit year
var cmonth = 1; // 0 for January, 1 for February ... 11 for December
var cdate = 7; // day of the month
var chours = 0; // 24-hour only
var cminutes = 0;
var cseconds = 0;
var cms = 0; // milliseconds

var description = "Consigliere's Birthday - 2007";
var future = new Date(cyear,cmonth,cdate,chours,cminutes,cseconds,cms);

Little Extra Not Included In The Script: If you noticed on our example, we had links to each of the different types of time. This is not part of the script. We added it as a convenience for people who are curious (like us) and didnot know what all the different types of time were. These links are just an explanation of the different times set forth within this effect. If you would like to include this in the effect, just grab the below link and copy and paste "Our" <BODY> section that has the code and all the links set up just like our example.
[ <BODY> Section Of Code ]

The reason we have this effect open in a new window is quite simple. Since it is rather large, instead of taking up all the space on the main page, we just used a javascript link to call it from a page with just the effect on it. If you would like to use the same type of effect to open the effect, it is quite simple.

Design a page with nothing on it but the effect itself.
Copy and paste the below code on the page you want to linkto the effect.

<A HREF="javascript:void(0)" ONCLICK="open('URL To Page You Have Effect On', 'myannouncer','toolbar=0,menubar=1,location=0,resizable=0,width=600,height=370')">
Open Multi-Display Clock</A>
Reconfigure the javascript link to your needs and you are done.

For your Information: In reference to the above reconfigurations. The zero (0) denotes that attribute will not be seen and a one (1) means the attribute will be seen. The width and height are the size in pixels (px) the window will open.

Note Of Professionalism: In reference to the level your site attains. It elevates your site's level of professionalism by adding the little "Close Window" button or link on the linked-to page. It may not seem like much but little things such as this stick in people's minds as a little convenience not required but done anyway. Below are the codes for the form button, text, and a linkto another page for the effect of closing the page by clicking on a graphic. These effects are placed anywhere in the <BODY> section of your document you want it to appear. "Do Not Overdo" the use of these little buttons. We just add them into our pages when we have as we do here Pop up windows that need to open in a new window to keep focus on the main page.

<------ Close Window Form Button ------>

<------ Close Window Text Link ------>

<a href="javascript:window.close();">Close Window</a>

Close Window

[ Linkto Close Window By Clicking Graphic ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]