DHTML Clock Object

Revisions:

• Removed the name, dateNestRef, and timeNestRef parameters from the construcotr.

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:

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

Source Code

// DHTML Clock Object
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// Jan 16, 1998.
// In order to use this code you must keep this disclaimer

function Clock(name,dateNestRef,dateX,dateY,timeNestRef,timeX,timeY) {
	this.name = name
	this.dateNestRef = dateNestRef
	this.timeNestRef = timeNestRef
	this.obj = this.name + "Object"
	eval(this.obj + "=this")
	this.dateX = dateX
	this.dateY = dateY
	this.timeX = timeX
	this.timeY = timeY
	this.showSeconds = true
	this.twelveHour = true
	this.showDate = true
	this.showTime = true
	this.activate = ClockActivate
	this.getDate = ClockGetDate
	this.getTime = ClockGetTime
	this.build = ClockBuild
	this.tick = ClockTick
}
function ClockBuild(write) {
	this.getTime()
	this.css = css("clockDate",this.dateX,this.dateY)+css("clockTime",this.timeX,this.timeY)
	this.dateDiv = '<div id="clockDate"><div class="dateStyle">'+this.getDate()+'</div></div>'
	this.timeDiv = '<div id="clockTime"><div class="timeStyle">'+this.time+'</div></div>'
	this.div = ''
	if (this.showDate) this.div += this.dateDiv
	if (this.showTime) this.div += this.timeDiv
	if (write!=false) {
		var str = css('START')+
		this.css+
		css('END')
		document.write(str)
	}
}
function ClockGetDate() {
	var monthList = new Array('January','February','March','April','May','June','July','August','September','October','November','December')
	var dayList = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday')
	now = new Date()
	return dayList[now.getDay()]+", "+monthList[now.getMonth()]+" "+now.getDate()+", "+(1900+now.getYear())+"."
}
function ClockGetTime() {
	var now = new Date()
	this.newmin = now.getMinutes()
	if (this.newmin<10) this.newmin = "0"+this.newmin
	var hour = now.getHours()
	var ampm = "am"
	if (this.twelveHour) {
		if (hour>12) {
			hour-=12
			ampm = "pm"
		}
		else if (hour==0) {
			hour = 12
		}
	}
	if (hour<10) hour = " "+hour
	this.time = hour+":"+this.newmin
	if (this.showSeconds) {
		var sec = now.getSeconds()
		if (sec<10) sec = "0"+sec
		this.time += ":"+sec
	}
	if (this.twelveHour) this.time += ampm
}
function ClockActivate() {
	if (this.showDate) {
		this.datelyr = new DynLayer(this.name+"Date",this.dateNestRef)
		this.datelyr.write = DynLayerWrite
	}
	if (this.showTime) {
		this.timelyr = new DynLayer(this.name+"Time",this.timeNestRef)
		this.timelyr.write = DynLayerWrite
	}
	this.tick()
}
function ClockTick() {
	this.getTime()
	if (this.oldmin!=this.newmin || this.showSeconds) {
		if (this.showTime) this.timelyr.write('<div class="timeStyle">'+this.time+'</div>')
		this.oldmin = this.newmin
	}
	setTimeout(this.obj+".tick()",1000)
}

Demo:

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

Home	Next Lesson: Calendar Object

copyright 1998 Dan Steinman