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