• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Content > Including a Clock

Including a Clock

As Groucho Marx said, “Time flies like an arrow, and fruit flies like a banana.” If you’re designing a site where users may enter time-sensitive information, or if you just want to remind visitors of how much time they’re spending on the Web, you may want to include a clock on your Web page.

This clock displays the local time reported by the visitor’s computer.

To add a clock to your Web page:

1.
function countThis(){...}

Add the function countThis() to the JavaScript (Code 4.16). This function checks the hours, minutes, and seconds reported by the computer’s clock, translates this data from military format to a.m./p.m. format, and writes that information in the counter CSS layer. The function runs recursively until the page is unloaded. Steps 2–10 apply to this function.

Code 4.16. The code writes itself into a layer recursively running the function countThis(), updating the time every second.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Adding a Clock</title>
        <script>
     function countThis(){
								var digitalClock = new Date();
								var hours = digitalClock.getHours();
								var minutes = digitalClock.getMinutes();
								var seconds = digitalClock.getSeconds();
								var dn = "am"
								if (hours>12){
								dn="pm";
								hours=hours-12;
								}
								if (hours==0) hours=12;
								if (minutes<=9) minutes="0"+minutes;
								if (seconds<=9) seconds="0"+seconds;
								var clockObject = document.getElementById('clockFace');
								var countDown = '<span class="clockStyle">'+hours+':'+minutes+':'+seconds+' '+dn+'</span>';
								clockObject.innerHTML=countDown;
								setTimeout("countThis()",1000);
								}
        </script>
        <style type="text/css"
media="screen"><!--
#clockFace {
								position:absolute;
								z-index:201;
								top:10px;
								left:10px;
								width:200px;
								height:20px;
								}
								.clockStyle {
								font:bold 25px helvetica, arial;
								}
        --></style>
     </head>
     <body onload="countThis()">
        <div id="clockFace">
								<!-- Dynamically Filled -->
								</div>
     </body>
</html>


					  

2.
var digitalClock=new Date();

Define a variable called digitalClock that records the current Date object.

3.
var hours=digitalClock.getHours();

Use digitalClock to define variables to record the current hour, minute, and second values from the Date object.

4.
var dn="am"

Define a variable called dn to record whether the time is a.m. or p.m. Test to see whether it is currently p.m. (hours is greater than 12), then translate the hours value from military time.

5.
if (hours==0) hours=12;

If it is midnight, translate the time from 0 to 12.

6.
if (minutes<=9) minutes="0"+minutes;

If the minutes or seconds value is 9 or less, add a leading 0.

7.
var clockObject = document.
→ getElementById('clockFace');


Define a variable called clockObject to record the object for the layer where the clock is displayed on the page.

8.
var countDown='<span class=
→ "clockStyle">'+hours+':
→ '+minutes+':'+seconds+'
→ '+dn+'</span>';


Define a variable called countDown to record the HTML used to display the current time.

9.
clockObject.innerHTML=countDown;

Use innerHTML to insert the new time on the page, replacing what was currently in that area. The upshot of this is that it will look as if the clock is ticking away every second.

10.
setTimeout("countThis()",1000);

Use setTimeout() to run the function countThis() again after a 1-second delay.

11.
#clockFace {...}

Create an ID called clockFace, which defines the clock’s layer. Give this layer a position, width, and height, depending on the font size you define in clockStyle (step 12).

12.
.clockStyle {...}

Create a class called clockStyle, which defines the appearance of the clock. The clock can be small or large, depending on the font size.

13.
onload="countThis()"

Add the onload event handler to the <body> tag, and have it trigger the countThis() function. This starts the clock.

14.
<div id="clockFace"></div>

Create the clock layer: a <div> tag with id set to clockFace. Initially, this area is empty when the page first loads, but is quickly filled with the ticking clock (Figure 4.31).

Figure 4.31. The digital clock, displaying the visitor’s local time.


✓ Tips

  • This function does not work in Netscape 6.

  • This time is very different from the server time and GMT code I showed you in “Adding External Content Using Server-Side Includes” earlier in this chapter. This clock shows (and updates every second) the local time as set on the visitor’s computer. Thus, if a visitor has their time set incorrectly, this clock will display the wrong time.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint