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.

Initialization:

First of all you must include dynlayer.js, and clock.js.

<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="clock.js"></SCRIPT>

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:

function init() {
	myclock.activate()
}

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

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

That will write both the layers, 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:

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()

View clock1.html for a DHTML clock example. View Source Code

Source Code

Download: clock.js
View Source: clock.js

Home Next Lesson: Calendar Object
copyright 1998 Dan Steinman


Casa de Bender