Advanced: It's about TIME

Does your page need something to set it apart from other pages? If so, you might want to include something that changes constantly . . . like a running clock, the very icon of change. Before we wax too philosophical, we'll help you implement your own Web clock as we discuss the mechanism that makes a Web clock work.

Table of Contents

What is a Web clock?
How do I make a basic Web clock?
How do I make a graphical Web clock?
Some working examples
More ideas for using a Web clock

What is a Web clock?

A Web clock is simply a clock on a Web page that continues to run after the Web page has finished loading. This idea can be implemented simply by using text to represent the clock's interface or by using a set of graphical elements, which is more complicated, to convey time to your visitors. The text method tends to be the fastest and does not place the extra load on a Web server that graphical numbers and symbols do. The text method, however, is also less visually appealing. In constrast, the graphical method requires more time to load and uses more of the Web server, but it generally looks better and can be integrated more flexibly into a Web site's interface.

A Web clock has some pieces that need to be created. If you want to show the clock graphically, then you need to create (or obtain) a graphical representation of each number from 0 through 9. You will also need an hours, and minutes, delimiter character, such as a colon, and if you want to represent time in a twelve-hour format and be able to differentiate between morning and evening hours, you need a graphic that represents "AM" and one that represents "PM". One excellent source for graphics and media is http://www.screamdesign.com, click here to visit their site.

In addition to obtaining the pieces, you need to create the underlying code to make the clock work. This example will illustrate how to create a clock using JavaScript as our client-side scripting language. Using that language and its inherent objects, methods, and events, we will primarily use the Date object and the set Timeout event and will secondarily use other language elements. Keep in mind that since the functionality of this clock is implemented in your visitor's browser, you can use any client-side language that is available in that browser. VBScript or even full-fledged Java, for example, would achieve similar results. In this example, we use JavaScript because it is probably the best represented across the widest range of browser/platform combinations, and it is the lightest in terms of processing power required at the client end.

How do I make a basic Web clock?

To make a clock that works with Netscape (Internet Explorer does not suffer from this problem), you will need to create an object that can be updated without having to reload the whole page. A good object to use is a form control because by they are designed to be changed at the user's end (client end) without the page reloading from the Web server each time the user interacts with the page. This object can be created as follows:

<form name="clock_form">
<input name="clock" size=8 style="border:0px;">
</form>

To access the control through the document object model, it must be in a <FORM> container. As you can see from the example, for simplicity, we named the <FORM> container and the form control that will contain the clock. Notice that in the form control we have assigned a size and a style: These are cosmetic only. Netscape ignores the style, which means it will continue working even under a lowest common denominator situation, but Internet Explorer recognizes the border property that hides the visual elements around the form control and gives it away as a simple text input. (Actually, there are better ways to do this in Internet Explorer since it can effectively use any HTML container as the dynamic container. So, for example, we could use a <DIV> container instead of setting up a form, and then access the DIV container--without reloading the page--and change its contents via the innerHTML property all we want. Very nice!) This feature is demonstrated in some of the examples, but you must be using IE4.x or better in order for them to display correctly.

Once you have set up the "display object" that will display the clock, you must set up a "clock object" and create a method of accessing that object at some interval and displaying it in the display object. Here is the additional code necessary to do this:

<SCRIPT>
function display_clock(){
 // Create a "clock object" (not really an object but same idea) by accessing the DATE object 
  var today=new Date();

 // Break off the components of the DATE we want
  var today.hours=today.getHours(); 
    if(hours<10)hours='0'+hours;
  var minutes=today.getMinutes(); 
    if(minutes<10)minutes='0'+minutes;

 // Assemble the components and ":" delimeters (cosmetic)
  var current_time=hours+":"+minutes;

 // Now put that string into the "display object"
  document.clock_form.clock.value=current_time;

 // Setup a timer to call this function again in 1 minute (60000 milliseconds)
  setTimeout('display_clock();',60000);
}
display_clock();
</SCRIPT>

The script section first sets up a clock object based on the current time returned from your computer's clock. It breaks that clock object down into its aggregate pieces, namely the hours, and minutes components. It then checks each of those to see that they are longer than 1 digit. If not, it adds a 0 to the beginning. After getting these pieces, it constructs a string using those values and then displays the string by changing the value property of the form control we set up earlier. Finally, since the clock must continue to do this over and over, we must set up a timer event to restart the function. To get the ball rolling, we call the function into the page for the first time only after each component required by the clock has been set up. This prevents errors from occurring when the form tries to access objects that have not yet been set up.

These basic steps are necessary for any variation on a scripted clock. If you want to change the display container and use images instead, you still build from this basic premise.

How do I make a graphical Web clock?

To make a graphical version of the same clock, you need to create different HTML containers (images instead of a form control). This will also work under Netscape because it supports image swapping. One oddity you will notice, however, is that when Netscape creates the <IMG> containing, it also sets width and height attributes that remain static, so all images coming into that container through a swap will be rendered at that size. Although annoying, it doesn't prevent the clock from working. Create the image objects as follows, making sure to give each a unique, sequential name. (This is for the script later.) The one exception to the sequential naming would be any graphic pieces that will not change, such as the colon delimeters in this example. The ampm piece (for AM or PM) is also handled outside of the loop, so its name doesn't have to be in the sequence either, just unique.

<IMG NAME=i0 SRC=clock1/hyphen.gif>
<IMG NAME=i1 SRC=clock1/hyphen.gif>
<IMG NAME=delim SRC=clock1/colon.gif>
<IMG NAME=i2 SRC=clock1/hyphen.gif>
<IMG NAME=i3 SRC=clock1/hyphen.gif>
<IMG NAME=ampm SRC=clock1/hyphen.gif>

Accessing these images is similar to the form control method, but the path through the DOM array is slightly different. For simplicity, the <IMG> containers were named sequentially so we can easily loop through each of the numerical elements that will continually change. Once the graphical "display object" is set up, we need to add the code that handles the "clock object". Here is the additional code necessary for the graphical method. Notice the similarities to the previous script for the basic clock.

<SCRIPT>
//pre-cache images for clock so they don't keep reloading
 image0=new Image(); image0.src='clock1/0.gif';
 image1=new Image(); image1.src='clock1/1.gif';
 image2=new Image(); image2.src='clock1/2.gif';
 image3=new Image(); image3.src='clock1/3.gif';
 image4=new Image(); image4.src='clock1/4.gif';
 image5=new Image(); image5.src='clock1/5.gif';
 image6=new Image(); image6.src='clock1/6.gif';
 image7=new Image(); image7.src='clock1/7.gif';
 image8=new Image(); image8.src='clock1/8.gif';
 image9=new Image(); image9.src='clock1/9.gif';
 image10=new Image(); image10.src='clock1/am.gif';
 image11=new Image(); image11.src='clock1/pm.gif';

function display_clock(){
//setup the clock object and break it into its components
 var today=new Date();
 var hours=today.getHours();
 var minutes=today.getMinutes();

//12 hour clock (determine am or pm and alter hours accordingly)
 document.ampm.src=image10.src;
 if (hours>11){ hours-=12;
  document.ampm.src=image11.src;
 }
 if (hours==0) hours=12;

//make sure hours, and minutes are all two digit numbers.
 if(hours<10)hours='0'+hours;
 if(minutes<10)minutes='0'+minutes;

//build the string which will be used for the display
//and loop through the img objects updating them to match the string
 var current_time=''+hours+minutes;
 for(i=0;i<6;i++){ //(6 for the number of digits hh mm ss)
  eval('document.i'+i+'.src=image'+current_time.charAt(i)+'.src');
 } 

//set an interval and then call this same function over
 var timer1=setTimeout('display_clock();',60000);
}
</SCRIPT>

<SCRIPT FOR=window EVENT="onload">
//NOTE: Wait for the page to COMPLETELY load
// before starting the clock and timer or
// your page will be VERY slow and NEVER stop 
// loading itself.
 setTimeout('display_clock();',2000);
</SCRIPT>

The script section operates almost exactly as the basic version. The only differences hinge around pre-loading graphics and updating an <IMG> container instead of a form <INPUT> element. Notice also that starting the clock is delayed until AFTER the page has finished loading. This allows the browser enough time to finish getting everything needed to make this clock work without returning constantly to the Web server for new graphics.

Some working examples

The Web clock might seem a simple application from an object standpoint, and, well, that's the whole point. It can be dropped into a Web site wherever it it might be pertinent (or wherever you might want it, whether it's pertinent or not). Here are some examples, using the same basic core and building up to different interfaces (graphical and text). The example at the bottom only works under IE4.x or higher because it uses the innerHTML example mentioned earlier to create a more flexible text clock using CSS positioning techniques.

(This one IE Only)

More ideas for using a Web clock

One thing that has always annoyed us about JavaScript clocks is that the Date object is established on the client end and thus it uses the visitor's time zone. This is, of course, good at the visitor end because presumably if the clock is set accurately, it will represent local time for the visitor. However, clocks are not exactly a new idea, nor are they in short supply. In fact, it's very likely that your visitor already has a clock in view, perhaps on the wall or the desk next to them, in addition to the one on their computer, so who needs ANOTHER clock showing the local time!? They might, however, be interested in what time it is at the server end . . . perhaps it's a little philosophical, but displaying the time at the server end seems to connect the client and the server ends in a more three dimensional way. It can illuminate the incredible distance that the packets making up the Web site have traveled in such tiny increments of time, or it can expose the local nature of a particular Web site. The Internet is such an ethereal idea anyway, that exposing visitors to the idea that it exists in three-dimensional space is an interesting angle.

A similiar idea is using a CGI to pass a specific time to the visitor with the Web page, and then using script running at the visitor end to compare that time to the time on their computer. With this example, you could add to each call to display the clock the code necessary to "alter" the time returned to an approximated time at the server end, based on the comparison value.

Whether you want to take the clock idea to different ends or not, it is always an extra tool that you can use to make your Web site more functional.

Back to Build Your Site
Back to Table of Contents