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 = " "+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 |