NESGamepro.com - Javascript Clock

With this advanced Javascript function, you can completely customize a clock to your liking. This is the same function used in my Javascript Clock Generator tool, which outputs custom cross-browser compatible clock styles.

    There are three main steps to install this Javascript on your website:

  1. Place the following Javascript code between the <head> and </head> tags:

  2. Copy the onLoad attribute to the <body> tag:

  3. Place the following HTML code between the <body> and </body> tags:

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...



Customizing the Clock

Clock Formating

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




Display Type

As I mentioned above the "document.clock.face" lines in the Javascript supply the HTML form with the clock format. A form field isn't the the only way to display the clock though. This area will give a couple examples of other ways you can use the Javascript clock function. Not all of them are compatible with every browser though.

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.



You can also use the innerHTML/innerText properties to display the clock, just replace "document.clock.face" with something like this:

(There are two versions for each clock to support multiple browsers.)

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.





Colors and Style

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.

Back to Home