For your convenience, the codes above have been placed together on an example page that you can copy and play with. The zipped file contains the same HTML file.

• jsclock_example.html
• jsclock_example.txt
• jsclock_example.zip

When you have a copy of your own set up and working on your website, the real fun can begin...

This is probably the most confusing part of using this Javascript function. The formating I'm about to explain will allow you to completely customize what the clock says, for example, will it say "October 31st" or "10-31". I will try to explain this in the clearest way possible, however, if it proves to be too confusing, I recommend you try the Javascript Clock Generator tool, which will do all the formating for you, and much more.

To begin, look near the bottom of the example Javascript, directly above "setTimeout(...)". You will notice two lines begining with "document.clock.face". Those lines supply the clock format to the HTML form examples shown. Since there are two clocks in the example I simply have one of them named "face2". You can have as many or few clocks as you want. More on the forms under Display Type.

After the equal sign (=) there is what looks like a bunch of junk, that is the actual clock format itself. It uses variables (basically keywords that store a piece of data, clock info in this case) and regular text to properly space out the clock parts.

A basic rule of thumb in this Javascript is variables go between plus signs (+) and regular text goes between quotation marks (").

Here is a list of the variables you can use to format your clock:

+sdow+ - Short day of week name (Sun-Sat) [Max: 3]
+ldow+ - Long day of week name (Sunday-Saturday) [Max: 9]
+smon+ - Short month name (Jan-Dec) [Max: 3]
+lmon+ - Long month name (January-December) [Max: 9]
+nmon+ - Month number (1-12) [Max: 2]
+dom+ - Day of month (1-31) [Max: 2]
+dom2+ - Same as above, but with a suffix attached (1st, 2nd, 3rd, etc.) [Max: 4]
+year+ - Four digit year [Max: 4]
+year2+ - Two digit year [Max: 2]

+h+ - Hour from the 12 hour clock (1-12) [Max: 2]
+hb+ - Hour from the 12 hour clock (01-12) [Max: 2]
+hrs+ - Hour from the 24 hour clock (0-23) [Max: 2]
+h2b+ - Hour from the 24 hour clock (00-23) [Max: 2]
+m+ - Minute (00-59) [Max: 2]
+s+ - Second (00-59) [Max: 2]
+ms+ - Millisecond (000-999) [Max: 3]
+ap+ - AM or PM [Max: 2]
+ap2+ - am or pm [Max: 2]

Example:
ldow+", "+lmon+" "+dom2+" "+year+"   "+h+":"+m+":"+s+" "+ap

Tip:
Make sure you start and end the format with either regular text surrounded by quotation marks or a variable name without the plus sign.
Good - .value = ldow;
Bad - .value = +ldow+;
Good - .value = ""+ldow+"";
Bad - .value = "+ldow+";

Also, when you change the format, make sure you change the size="" attribute of the <input type="text"> tag. To do this, add the "max" value of each variable you use from above, then add the number of other characters you use in your format. I also suggest adding another 2 on top of that for good measure. Don't count the pluses or quotes

Example: "The time is: "+h+":"+m+":"+s+" "+ap+"" - 26 characters
  8   (total max length from variables)
 16   (number of other characters)
+ 2   (good measure)
---
 26

I recommend using CSS to decorate the clock. Where you place the style sheets depends on which display type you choose.

If you have a clock in the status bar, you can not use special colors or styles. If you choose to use a form field, you place the style="" attribute in the <input type="text"> tag. If you use the innerHTML/innerText version you should place the style="" attribute in the <div> tag or you can use regular HTML formatting (<b>, <i>, etc.) if place it outside of the <div> tag.

Below is an incomplete list of styles you can use, place them between the quotation marks of the style="" attribute.

• background-color:blue; - (#hex or color name)
  This is the color that is behind the text.
• color:red; - (#hex or color name)
  This is the text color.
• font-weight:bold; - (normal, bold, bolder, lighter)
• font-style:italic; - (normal, italic, oblique)
• text-decoration:underline; - (underline, overline, line-through)
• font-family:monospace; - (serif, sans-serif, cursive, fantasy, monospace)
  Use one of the listed generic names or a system specific font name.
• border:0 - (a number)
  In this case, just sets the width the border in pixels, there are a lot of other ways to format the border with CSS though.

  WebTV Only
  

• text-decoration:emboss; - (emboss, relief, shadow)
  The next 3 aren't actually CSS, they are HTML attributes for WebTV only when using the form display type.
  
• bgcolor="blue" - (#hex or color name)
  This is the color that is behind the text. WebTV must have this in the <input type="text"> tag because the background-color CSS does not work for them.
• border=0 - (a number)
  WebTV also can't use the border CSS, so use this to choose the border width instead.
• usestyle
  Add this to your <input type="text"> tag and the form field text will inherit the style of the page in WebTV. This allows you to format the clock text with regular html tags.
  Example:
  style="background-color:blue; color:red; font-weight:bold; font-style:italic; text-decoration:underline; font-family:monospace; text-decoration:emboss; border:0" bgcolor="blue" border=0 usestyle