12-24 Hour Time Clock ~ Tested in IE6.0, Netscape8.1, Opera8.54, Firefox1.5.0.3 and AOL Explorer1.2

D isplay the local time in the 12 hour or 24 hour format. Selection is made by the visitor using the radio buttons displayed with the clock.

For your Information: If you do not understand a 24 hour or Military time clock, grab the below link and it is completely explained.
[ 24 Hour/Military Time Explained ]

W e have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and javascripts, this is an easy three part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an external .js script you need to save and upload into your directory.

Step One Is to paste a section of code into the CSS section of your HTML document. If you do not have a CSS section, this is not a problem. You just need to add the opening and closing CSS style sheet tags around this part of the code. See below on where and howto:

I n reference to the <style> Sheet (CSS) you can change the font, colors etc. See the below on where and howto:

table.clock {
text-align: center;
border: thin dotted* blue;
padding: 5px;
margin: auto;
}

td, input.clock2 {
text-align: center;
border: none;
font: bold .9em verdana, arial, helvetica, ms sans serif;
padding-bottom: .5em;
}

.clock3 {
text-align: center;
font: .7em verdana, arial, helvetica, ms sans serif;
}

* You can change the word "dotted" to solid" if you like that look as opposed to the dotted border. As you can notice, we had to set this effect in an "I" Frame. Reason being is quite simple. The style sheet that you paste into the <HEAD> section can be configured for only one(1) border (solid of dotted). So..... in order to show the other example, it could not be physically located on this page. (Therefore...."I" Frame fits the bill perfectly).

Step Two Is to copy and paste a section of code into a notepad, save as timeFormat.js file and then upload it into your directory. If you are a little unsure on howto do this, grab the below link and it is fully explained.
[ External .js File Howto ]

Step Three Once you completed the above part, now you need to paste a snipplet of code into the <HEAD> section of your document to call the external .js file you have uploaded into your directory. You may need to change the path of the below little section of code if you have uploaded it into a directory other than your "Root" or "Top" directory. This is also covered in the above link on "External .js File Howto".

Step Four Is to paste the last part of the code into the <BODY> section wherever you want the effect to appear.

W e 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 ]