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.
When you have a copy of your own set up and working on your website, the real fun can begin...
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
Probably the second most common way to display a Javascript clock is to have it in the status bar, which is usually at the bottom of most browsers. To do that, all you have to do is replace "document.clock.face" with something like this:
For your convenience, the code above has been placed on an example page that you can copy and play with. The zipped file contains the same HTML file.
Then use this instead of the HTML form:
For your convenience, the code above has been placed on an example page that you can copy and play with. The zipped file contains the same HTML file.
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.
WebTV Only