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). Because of this, you need 2 separate nestref parameters, dateNestRef, and timeNestRef. You also need to send the x and y coordinates for those layers, they do not have a dimension.

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

Example:

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

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 true/false values, they're all true by default:

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

myclock = new Clock("myclock",null,30,50,null,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 8, 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.getTime()
	this.build = ClockBuild
	this.tick = ClockTick
}
function ClockBuild(write) {
	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 && hour>12) {
		hour-=12
		ampm = "pm"
	}
	if (hour<10) hour = "&nbsp;"+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)
}

// DynLayer Write Method
// copyright 1998 Dan Steinman
// http://www.dansteinman.com/dynduo/
function DynLayerWrite(html) {
	if (ns4) {
		this.doc.open()
		this.doc.write(html)
		this.doc.close()
	}
	else if (ie4) {
		this.event.innerHTML = html
	}
}

Demo:

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

Home Next Lesson: Clock Object
copyright 1998 Dan Steinman