"use strict"; var gv={ clockcount: 1, svg:'http://www.w3.org/2000/svg', xlnk:'http://www.w3.org/1999/xlink', tzlist:['Local'].concat(moment.tz.names()), vbox:document.getElementById('svg').getAttribute("viewBox").split(" ") }; function mousepos(event) { var minxy=innerWidth; if (minxy > innerHeight) minxy=innerHeight; return { x:((event.clientX-(innerWidth-minxy)/2)/minxy)*(gv.vbox[2]-gv.vbox[0]), y:((event.clientY-(innerHeight-minxy)/2)/minxy)*(gv.vbox[3]-gv.vbox[1]) }; }; function myClock(cx,cy,r,tz) { var clock=this, elem; this.cx=128; if (typeof(cx)!=='undefined') this.cx=cx; this.cy=128; if (typeof(cy)!=='undefined') this.cy=cy; this.r=100; if (typeof(r)!=='undefined') this.r=r; this.tz=new Date().getTimezoneOffset(); this.setTz=function(tz) { if (typeof(tz)!=='undefined') { this.label=tz; if (tz!=="Local") { var ndte=new Date(); var tzoff=moment(ndte).tz(tz).format('HH mm ss').split(' '); var tznow=Math.floor(ndte/1000)%86400; this.tz=(tznow-(tzoff[0]*3600+tzoff[1]*60+1*tzoff[2]))/60; } else this.tz=new Date().getTimezoneOffset(); } else this.label="Local"; }; this.setTz(tz); this.clkid=gv.clockcount++; this.floor=0; this.toggleFloor=function(e) { e.preventDefault(); clock.floor=1-clock.floor; }; this.toggleSecDraw=function(e) { e.preventDefault(); clock.secdraw=1-clock.secdraw; }; this.wheel=function(e) { e.preventDefault(); var sens=1; if (typeof(e.detail)!=='undefined') { if ( 0 > e.detail ) { sens=-1; } } else if ( 0 > e.wheelDelta ) { sens=-1; }; var cidx=gv.tzlist.indexOf(clock.label)*1+1*sens; if (cidx < 0) cidx=gv.tzlist.length-1; if (cidx >= gv.tzlist.length) cidx=0; clock.setTz(gv.tzlist[cidx]); clock.draw=0; }; this.moused = function (evt) { evt.preventDefault(); var m=mousepos(evt); if ((clock.r/2 > Math.pow(Math.pow(Math.abs(clock.cx-mx),2)+ Math.pow(Math.abs(clock.cy-my),2),.5))) { clock.box.addEventListener("mousemove", clock.mousem, true); } else { clock.box.addEventListener("mousemove", clock.mouser, true); }; clock.box.addEventListener("mouseup", clock.mouseu, true); }; this.mouseu = function(evt) { evt.preventDefault(); clock.draw=0; clock.box.removeEventListener("mousemove", clock.mouser, true); clock.box.removeEventListener("mousemove", clock.mousem, true); clock.box.removeEventListener("mouseup", clock.mouseu, true); }; this.mouser = function(evt) { evt.preventDefault(); clock.draw=0; var m=mousepos(evt); clock.r=1.25*Math.pow(Math.pow(Math.abs(clock.cx-mx),2)+ Math.pow(Math.abs(clock.cy-my),2),.5); }; this.mousem = function(evt) { evt.preventDefault(); clock.draw=0; var m=mousepos(evt); clock.cx=mx; clock.cy=my; }; this.drop = function(evt) { evt.preventDefault();clearInterval(clock.loop); clock.box.remove(); }; elem=document.createElementNS(gv.svg,'g'); elem.setAttribute('id','box'+this.clkid); document.getElementById('myClock').appendChild(elem); this.box=document.getElementById('box'+this.clkid); this.box.addEventListener("mousedown", this.moused ,true); this.box.addEventListener("click", this.toggleSecDraw,true); this.box.addEventListener("dblclick", this.toggleFloor ,true); this.box.addEventListener('mousewheel', this.wheel, true); this.box.addEventListener('DOMMouseScroll',this.wheel, true); this.box.addEventListener('contextmenu', this.drop, true); elem=document.createElementNS(gv.svg,'circle'); this.fill='fill: url(#g'+this.clkid+');'+ 'stroke: url(#gb'+this.clkid+');'; elem.setAttribute('style',this.fill); elem.setAttribute('id','crc'+this.clkid); this.box.appendChild(elem); this.crc=document.getElementById('crc'+this.clkid); this.ticks=[]; for (var i=0;i<60;i++) { elem=document.createElementNS(gv.svg,'line'); elem.setAttribute('class','ticks'); elem.setAttribute('id','t'+i+'c'+this.clkid); this.box.appendChild(elem); this.ticks.push(document.getElementById('t'+i+'c'+this.clkid)); }; elem=document.createElementNS(gv.svg,'rect'); elem.setAttribute('class','label'); elem.setAttribute('id','r'+this.clkid); this.box.appendChild(elem); this.rct=document.getElementById('r'+this.clkid); elem=document.createElementNS(gv.svg,'text'); elem.setAttribute('id','x'+this.clkid); this.box.appendChild(elem); this.tbx=document.getElementById('x'+this.clkid); elem=document.createElementNS(gv.svg,'tspan'); elem.setAttribute('id','t'+this.clkid); this.tbx.appendChild(elem); this.txt=document.getElementById('t'+this.clkid); elem=document.createElementNS(gv.svg,'line'); elem.setAttribute('id','hr'+this.clkid); elem.setAttribute('class','hours'); this.box.appendChild(elem); this.hhr=document.getElementById('hr'+this.clkid); elem=document.createElementNS(gv.svg,'line'); elem.setAttribute('id','mn'+this.clkid); elem.setAttribute('class','minutes'); this.box.appendChild(elem); this.hmn=document.getElementById('mn'+this.clkid); elem=document.createElementNS(gv.svg,'line'); elem.setAttribute('id','sc'+this.clkid); elem.setAttribute('class','seconds'); this.box.appendChild(elem); this.hsc=document.getElementById('sc'+this.clkid); elem=document.createElementNS(gv.svg,'linearGradient'); elem.setAttribute('id','g'+this.clkid); elem.setAttributeNS(gv.xlnk,'xlink:href','#g0'); document.getElementById('defs').appendChild(elem); this.deg=document.getElementById('g'+this.clkid); elem=document.createElementNS(gv.svg,'linearGradient'); elem.setAttribute('id','gb'+this.clkid); elem.setAttributeNS(gv.xlnk,'xlink:href','#g0'); document.getElementById('defs').appendChild(elem); this.dgb=document.getElementById('gb'+this.clkid); this.getTZ=function() { return this.tz; }; this.setTZ=function(tz) { this.tz=tz; }; this.draw=0; this.secdraw=1; this.adjust=function() { if (clock.draw!==1) { clock.crc.setAttribute('style','stroke-width:'+.03*clock.r+";"+ clock.fill); clock.hhr.setAttribute('style','stroke-width:'+.11*clock.r); clock.hmn.setAttribute('style','stroke-width:'+.075*clock.r); clock.hsc.setAttribute('style','stroke-width:'+ (clock.secdraw==1?.03:.09)*clock.r); clock.crc.setAttribute('cx',clock.cx); clock.crc.setAttribute('cy',clock.cy); clock.crc.setAttribute('r',clock.r); clock.rct.setAttribute('height',.2*clock.r); clock.rct.setAttribute('x',clock.cx-.9*clock.r); clock.rct.setAttribute('y',clock.cy*1+1.1*clock.r); clock.txt.innerHTML=clock.label; clock.txt.setAttribute('x',clock.cx); clock.txt.setAttribute('y',clock.cy*1+1.25*clock.r); clock.txt.setAttribute('style','font-size: '+(.15*clock.r)+"px;"); var w=clock.label.length*.1*clock.r+20.0; clock.rct.setAttribute('x',clock.cx-w/2); clock.rct.setAttribute('width',w); for (var i=0;i<60;i++) { var x=clock.cx*1+.925*clock.r*Math.sin(i/30*Math.PI); var y=clock.cy*1+.925*clock.r*Math.cos(i/30*Math.PI); clock.ticks[i].setAttribute('x1',x); clock.ticks[i].setAttribute('y1',y); clock.ticks[i].setAttribute('x2',x); clock.ticks[i].setAttribute('y2',y); clock.ticks[i].setAttribute('style','stroke-width:'+ (i%5==0?.04:.02)*clock.r); }; clock.hsc.setAttribute('x1',clock.cx); clock.hsc.setAttribute('y1',clock.cy); clock.hmn.setAttribute('x1',clock.cx); clock.hmn.setAttribute('y1',clock.cy); clock.hhr.setAttribute('x1',clock.cx); clock.hhr.setAttribute('y1',clock.cy); clock.deg.setAttribute('x1',clock.cx-1.1*clock.r); clock.deg.setAttribute('y1',clock.cy-1.1*clock.r); clock.deg.setAttribute('x2',clock.cx+1.1*clock.r); clock.deg.setAttribute('y2',clock.cy+1.1*clock.r); clock.dgb.setAttribute('x1',clock.cx+1.1*clock.r); clock.dgb.setAttribute('y1',clock.cy+1.1*clock.r); clock.dgb.setAttribute('x2',clock.cx-1.1*clock.r); clock.dgb.setAttribute('y2',clock.cy-1.1*clock.r); clock.draw=1; }; var now=new Date()/1000.0-this.tz*60; if (this.floor==1) now=Math.floor(now); var x=this.cx+(this.secdraw==1?.975:.925)* this.r*Math.sin((now % 60)/30*Math.PI); var y=this.cy-(this.secdraw==1?.975:.925)* this.r*Math.cos((now % 60)/30*Math.PI); this.hsc.setAttribute('x2',x); this.hsc.setAttribute('y2',y); if (this.secdraw==0) { this.hsc.setAttribute('x1',x); this.hsc.setAttribute('y1',y); } if (this.floor==1) now=Math.floor(now/60) else now=now/60; x=this.cx+.9*this.r*Math.sin((now %60)/30*Math.PI); y=this.cy-.9*this.r*Math.cos((now %60)/30*Math.PI); this.hmn.setAttribute('x2',x); this.hmn.setAttribute('y2',y); if (this.floor==1) now=Math.floor(now/60) else now=now/60; x=this.cx+.7*this.r*Math.sin((now % 12)/6*Math.PI); y=this.cy-.7*this.r*Math.cos((now % 12)/6*Math.PI); this.hhr.setAttribute('x2',x); this.hhr.setAttribute('y2',y); }; this.animate = function() { clock.adjust(); }; this.loop=setInterval(this.animate,66); }; document.getElementById('svg').addEventListener('dblclick', function(e){ if (e. target.id!=='svg')return;var m=mousepos(e);new myClock(mx,my,80,'Local'); }); var clocks=['UTC','Local','Asia/Kolkata']; for (var i=0;i<3;i++) { new myClock( 90+170*i,90,80,clocks[i]); };
circle { stroke: black; } .startbg { stop-color: #CCC; } .endbg { stop-color: #222; } .label { stroke: #424242;fill:#eee;stroke-width:1; } .minutes { stroke: #2288AA; } .hours { stroke: #3388CC; } .seconds { stroke: #CCCC22; } .ticks { stroke: black; } line,circle,rect,point { opacity:0.65; stroke-linecap:round; stroke-linejoin:round; marker:none; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1; visibility:visible; display:inline; overflow:visible; enable-background:accumulate } text { font-style:normal; font-variant:normal; font-weight:normal; font-stretch:normal; text-align:center; line-height:100%; writing-mode:lr-tb; text-anchor:middle; fill:#000000;fill-opacity:.7; stroke:none; font-family:Nimbus Sans L; }
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="myClock2.css" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" id="svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" > <defs id="defs"> <linearGradient gradientUnits="userSpaceOnUse" id="g0"><stop class="startbg" /><stop class="endbg" offset="1" /> </linearGradient></defs> <script type="text/ecmascript" xlink:href="http://momentjs.com/downloads/moment-with-locales.js" /> <script type="text/ecmascript" xlink:href="http://momentjs.com/downloads/moment-timezone-with-data.js" /> <title id="title">Clock object</title> <g id="myClock"></g> <script type="text/ecmascript" xlink:href="myClock2.js" /> <script type="text/ecmascript"> </script> </svg>