The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

On-Line Digital Wall Clock

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Eye Catching Timepiece ...

24-Oct-2014: The JavaScript on this page has been updated to reflect modern scripting techniques.

How about this striking, online digital wall clock for your Web site. This dynamic JavaScript clock is Y2k compliant and will operate correctly through to the year 2014 without changing the script. The script has recently been completely rewritten and although it still relies on the original JavaScript date/time routines, all the fiddly graphical bits have gone and have been replaced by Dynamic HTML. If you are new to web authoring then we should explain that Dynamic HTML is a mixture of HTML 4.01, JavaScript and CSS.

Telling The Time ...

Time is a very deep subject and can mean many different things, depending upon who you are talking to and the circumstances. This clock tells Local Time, that is the time where you are now, according to your computer clock's Local Time setting. If your computer's clock is set incorrectly then this time will be wrong. The main thing to remember about Local Time and the Internet is that this clock will be displaying many different times, all at the same time, depending in which time zone each user (i.e. you) is located.

In common with most other computer languages and operating systems JavaScript (inc. JScript and ECMA Script) is also capable of telling the time in GMT (Greenwich Mean Time) and if this clock was displaying GMT instead of Local Time then users all around the World should see the same time on their clock. Perhaps this is a little bit of an exaggeration because users computers do not get GMT from a central point in the World but instead, calculate it backwards from their own computer clock's local time setting. This means that if every computer in the World was displaying this clock and the clock was displaying GMT, then every computer would be likely to be telling a slightly different time because of errors in their computer clock's Local Time setting. Confusing isn't it?

Just to add a little bit more confusion JavaScript sometimes uses the acronym UTC (Universal Coordinated Time) instead of GMT (Greenwich Mean Time) which is the standard on the Internet, but for all practical purposes they are one and the same thing.

Script Compatibility ...

This Digital Clock source script is a robust, cross-browser script that does not require any additional graphics. It should work in all modern browsers including Microsoft, Firefox, Mozilla and Netscape. It will validate to W3C 'HTML 4.01 Strict', W3C 'HTML 4.01 Transitional' and W3C CSS. It also meets W3C WCAG 2.0 Accessibility guidelines.

The Full Script ...

If you are a student of JavaScript then this Digital Wall Clock script is an ideal way to learn about some of the methods that are available with the JavaScript Date object. The JavaScript Date object, which is very similar to the Java Date object, has a total of twenty methods and this script uses seven of the more popular methods. The full script consists of four parts, the HTML Code, the CSS Styles, the main JavaScript script and the 'start clock' script.

1. The HTML Code

paste this Markup in the BODY section of your page ...

 
 

2. The CSS Styles

paste these Styles in the HEAD section of your page or into an external style sheet...

 
 

3. The JavaScript Script

paste this script in the HEAD section of your page ...

 
 

4. The 'Start Clock' Script

paste this script just before the closing the BODY Tag ...

 
 

General Notes ...

This particular clock is a 24-hour clock but it would take very little scripting to convert it to a 12-hour am/pm clock. You would not have to change the dates at all but you would have to rearrange the display to accommodate the a.m./p.m. display and also tweak the script a little to make it 12 hour time but that in basic terms would be all that is required. You could use this as an educational exercise and use or develop your CSS skills to make the clock look good in the new format.

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Digital Wall Clock Why not display this eye-catching digital wall clock on your Web site. This dynamic JavaScript clock will operate correctly through to 2014 without changing the script and you can download it here.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Featured JavaScript Clock Examples
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England