/* JSClock v0.1 Copyright (c) 2003 Bogdan Ionescu (bogdan@febee.ro) This script is distributed under the terms of the LGPL (gnu.org) */ //using clockHandler so that if there are more instance of JSClock they will //be synchronized function clockHandler () { var handlers = new Array(); var time, oldTime; this.registerClock = function(clock) { handlers.push(clock); } this.unregisterClock = function(obj) { for(var i=handlers.length; --i>=0;) if(handlers[i] == obj) handlers.splice(i,1); } setInterval( function() { var t = new Date(); for(var i=handlers.length;--i>=0;) { if(handlers[i].drawS(t.getSeconds()) == 0) if(handlers[i].drawM(t.getMinutes()) % 10) handlers[i].drawH(t.getHours(), t.getMinutes() ); } } , 500); //calling two times per second for a smooth transition } var CH = new clockHandler(); // JSClock is the main function // Passing the id parameter you can use style sheets // Example: // // #cl2 {color:blue; // text-decoration:underline;} // // // The result is that the hours are displayed as blue and underlined /* * Member functions: * start() - the main function, it will start the clock * setTime(t) - used for seting a different time * setParent(p) - draws the clock inside p node (as opposed to document.body) * drawC(c) - draws a circle of colour c, representing the edge of the clock * setHours(ha,hp) - changes the default arabic hours displayed. For AM and PM */ function JSClock(id) { var obj, hline, mline, sline, cline, dline, size = 100; var hlines, mlines, slines, mozline; var fontSize; var hoursTypeAM; var hoursTypePM; var parent = document.body; var id = id; var H = 0; var M = 0; var S = 0; this.init = function() { obj = document.createElement('DIV'); obj.id = id; obj.style.width= 2*size +'px'; obj.style.height = 2*size + 'px'; parent.appendChild(obj); cline = document.createElement('DIV'); cline.style.position = 'absolute'; hline = cline.cloneNode(false); mline = cline.cloneNode(false); dline = cline.cloneNode(false); obj.appendChild(cline); obj.appendChild(dline); obj.appendChild(hline); obj.appendChild(mline); slines = new Array(); mlines = new Array(); /* * using this array to prevent some memory leaks in mozilla and opera. * the memory leak is created on a piece of code like: * obj.innerHTML = '
' * if you do this in a loop, both browser will continuously alloc memory * for the style and wont delete it altough it should. */ } // use this function if you want your JSClock to display starting from a // different time than your computer has. // Example: // jsc = new JSClock(50); // newTime = new Date(new Date().getTime() - 10*60*1000 + 15000) // jsc.setTime(newTime); this.setTime = function (t) { var tt = t - new Date(); S = parseInt(tt/1000)%60; M = parseInt(tt/60000)%60; H = parseInt(tt/1000*3600)%24; this.display(); } // use this if you want to create the JSClock as child of one of the nodes // Example: jsc.setParent(document.getElementById('myObject')); // If a parent is not specified the JSClock will be a child of document.body this.setParent = function( p ) { p.appendChild(obj); } // sets the font size of the'hours' displayed // Example: jsc.setFontSize(18) this.setFontSize = function( s ) { fontSize = s; dline.innerHTML = this.drawHours(size,size,size*(9/10),fontSize, this.getHoursType()); } // use it if you want to change the default displaying behavior (normal digits) // You can also specify a different display for AM/PM // Example I: // var hrs2 = new Array('','I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'); // jsc.setHours(hrs2); The clock will display roman characters // Example II: // var hrs1 = new Array('','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'); // jsc.setHours('',hrs1); will display the specified hours if its past the noon this.setHours = function( ha, hp ) { hoursTypeAM = ha; hoursTypePM = hp ? hp : ha; } //the size of the clock this.setSize = function ( s ) { size = isNaN(s) ? 50 : s; } //not implemented yet this.setAlarm = function ( t ) { } this.getHoursType = function() { return ((new Date()).getHours() < 12 ?hoursTypeAM:hoursTypePM); } // draws a circle of colour c representing the edge of the clock // Drawback: In mozilla it slows down the process (for big sized clocks) this.drawC = function (c) { var cc = document.createElement('DIV'); cc.style.position='absolute'; cc.innerHTML = this.drawCircle( size, size, size, c?c:'black'); cline.appendChild(cc); // workaround for mozilla. it sort of improves the speed } // draws the line for seconds. It's more complicated than it should // because mozilla and opera generate some memory leaks this.drawS = function (s){ var ss = (s+1)%60; var angle= -Math.PI/2+(Math.PI/30)*(S + s); var sangle= -Math.PI/2+(Math.PI/30)*(S + ss); if(sline == s) {return (s + S)%60;} if(!slines[s]) { slines[s]=document.createElement('DIV'); slines[s].style.position='absolute'; slines[s].innerHTML = this.drawT(size,size,angle,1.8,'red'); obj.appendChild(slines[s]); } else obj.appendChild(slines[s]); slines[s].style.display=''; if(slines[sline]) {obj.removeChild(slines[sline]); } sline = s; return (s + S)%60; } this.drawM = function (m){ var angle= -Math.PI/2+(Math.PI/30)*(m+M); if(!mlines[m]) mlines[m] = this.drawT(size, size, angle, 2.3, 'blue',2); mline.innerHTML = mlines[m]; return (m + M) % 60; } this.drawH = function (h, m){ var angle= -Math.PI/3 + (Math.PI/30) * (h - ((M+m)<30) + H) * 5; hline.innerHTML = this.drawT(size, size, angle, 3.5, '#888888', 3); return (h+H)%24; } this.display = function () { this.setFontSize(fontSize); t = new Date(); this.drawS(t.getSeconds()); this.drawM(t.getMinutes()); this.drawH(t.getHours(),t.getMinutes()); } this.start = function() { this.display(); CH.registerClock(this); } this.init(); } JSClock.prototype.drawCircle = function (x,y,r,color) { var HTML = ""; var txt1= '
'; tw = txtw+ dx + 'px;clip:rect(0,' + dx + 'px,1px,0);">'; HTML+=(txt1 + 'left:' + (xx2) + 'px;top:' + (y-yn) + th); HTML+=(txt1 + 'left:' + (xx2) + 'px;top:' + (y+yn-dx) + th); HTML+=(txt1 + 'left:' + (xx1) + 'px;top:' + (y-yn) + th); HTML+=(txt1 + 'left:' + (xx1) + 'px;top:' + (y+yn-dx) + th); HTML+=(txt1 + 'left:' + (x+yn-dx+1) + 'px;top:' + (y-xn) + tw); HTML+=(txt1 + 'left:' + (x1-yn) + 'px;top:' + (y-xn) + tw); HTML+=(txt1 + 'left:' + (x-yn) + 'px;top:' + (y+xn) + tw); HTML+=(txt1 + 'left:' + (x + yn-dx) + 'px;top:' + (y+xn) + tw); dx=1; } } while(xn >= yn); HTML+=(txt1 + 'left:'+ (x-1) +'px;top:' + (y-r+1) + 'px;height:1px;width:2px;clip:rect(0,2px,1px,0)">'); return HTML; } JSClock.prototype.drawHours = function(x, y, r, fs, hrs) { var HTML = ""; var txt='
' + h + '
'; } } return HTML; } JSClock.prototype.drawT = function( x, y, angle, length, color, t) { var fx=Math.cos(angle)*(x/length); var fy=Math.sin(angle)*(x/length); var HTML = this.drawLine(x,y,Math.round(x+fx),Math.round(y+fy), color, t) return HTML; } JSClock.prototype.drawLine = function ( Ax, Ay, Bx, By, color, t) { if(!t) var t = 1; var dX, dY, fbXincr, fbYincr, dPr, dPru, P; var x0=Ax, x1=Bx, y0=Ay,y1=By; var HTML =new String(); dX=Math.abs(Bx-Ax); dY=Math.abs(By-Ay); fbYincr=By Bx) { x0 = Bx; y0 = By; fbYincr=y0 0) {ddx++;;continue;} HTML= HTML.concat(txt + ddx + 'px,' + t + 'px,0);left:' + (x0)+ 'px;top:' + y0 + 'px;width:'+ ddx + 'px;">'); return HTML; } HTML= HTML.concat(txt + ddx + 'px,' + t + 'px,0); left:' + (x0) + 'px;top:' + y0 + 'px;width:'+ ddx + 'px;">'); x0+=ddx; y0+=fbYincr; P+=dPru; if ((dY=dY-1) > 0) {ddx=1;continue; } return HTML.concat(txt + ddx + 'px,' + t + 'px,0);left:' + (x0) + 'px;top:' + y0 + 'px;width:'+ ddx + 'px;">');; } } else { fbXincr=Bx By) { x0 = Bx; y0 = By; fbXincr=x0 0) {ddy++;continue;} return HTML.concat(txt + ddy + 'px,0px); left:' + x0 + 'px;top:' + (y0) + 'px;height:' + ddy + 'px;">'); } HTML=HTML.concat(txt + ddy + 'px,0px); left:' + x0 + 'px;top:' + (y0) + 'px;height:' + ddy + 'px;">'); y0+=ddy; x0+=fbXincr; P+=dPru; if ((dX=dX-1) > 0) {ddy=1;continue;} return HTML.concat(txt + ddy + 'px, 0px); left:' + x0 + 'px;top:' + (y0) + 'px;height:' + ddy + 'px;">'); } } return HTML; }