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...
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.
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]
ldow+", "+lmon+" "+dom2+" "+year+" "+h+":"+m+":"+s+" "+ap
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)
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.