The Dynamic Duo - DHTML Clock Object

DHTML Clock Object

The Clock Object is a DHTML object which creates a real-time clock with the current date and time (with the current seconds). The object writes the date and time in HTML text, so it is easily customizable and low-bandwidth.

The Clock writes 2 totally independent layers, one for the date, and one for the time (which are not nested in one master layer unlike all my other widget objects). You need to send the x and y coordinates for each of them, but they do not have a dimension.

objectName = new Clock(dateX,dateY,timeX,timeY)
objectName.build()

writeCSS (
objectName.css
)

Example:

myclock = new Clock(30,50,30,70)
myclock.build()

writeCSS (
myclock.css
)

Just like all my DHTML objects you call the activate() method in the init() function.

In the BODY of your document you must write the Clocks's div property:

<SCRIPT LANGUAGE="JavaScript">
document.write(myclock.div)
</SCRIPT>

Optionally if you want to write them independently (so that you can nest them), you can do that like this:

<SCRIPT LANGUAGE="JavaScript">
document.write(myclock.dateDiv)
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
document.write(myclock.timeDiv)
</SCRIPT>

Usage of the Clock

The clock has 4 build-time options, these are all boolean values, true by default:

showSeconds - to show the real-time seconds
twelveHour - to show the time as a 12hour clock (with am/pm), or as a 24 hour clock
showDate - to show the date layer
showTime - to show the time layer

To change any of these you change the falue before you build():

myclock = new Clock(30,50,30,70)
myclock.showSeconds = false
myclock.twelveHour = false
myclock.showDate = false
myclock.showTime = false  // but if you hide both date and time nothing will show
myclock.build()

Warning

I would not recommend using the showSeconds option if you need to load files into the page, or using layer writing on other pages. The the continual interval of writing the seconds will interrupt Netscape's ability to do other things at the same time.

View clock1.html [source] - for a DHTML clock example.

Source Code

clock.js