Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
dojo.provide("dojo.widget.Clock");
dojo.require("dojo.widget.*");
dojo.require("dojo.gfx.*");
dojo.require("dojo.uri.Uri");
dojo.require("dojo.lang.common");
dojo.require("dojo.lang.timing.Timer");
dojo.widget.defineWidget("dojo.widget.Clock",dojo.widget.HtmlWidget,function(){
var _1=this;
this.timeZoneOffset=0;
this.label="";
this.date=new Date();
this.handColor="#788598";
this.handStroke="#6f7b8c";
this.secondHandColor=[201,4,5,0.8];
this.topLabelColor="#efefef";
this.labelColor="#fff";
this.timer=new dojo.lang.timing.Timer(1000);
this.center={x:75,y:75};
this.hands={hour:null,minute:null,second:null};
this.shadows={hour:{shadow:null,shift:{dx:2,dy:2}},minute:{shadow:null,shift:{dx:2,dy:3}},second:{shadow:null,shift:{dx:4,dy:4}}};
this.image=dojo.uri.moduleUri("dojo.widget","templates/images/clock.png");
this.surface=null;
this.labelNode=null;
this.topLabelNode=null;
this.draw=function(){
_1.date=new Date();
var h=(_1.date.getHours()+_1.timeZoneOffset)%12;
var m=_1.date.getMinutes();
var s=_1.date.getSeconds();
_1.placeHour(h,m,s);
_1.placeMinute(m,s);
_1.placeSecond(s);
_1.topLabelNode.innerHTML=((_1.date.getHours()+_1.timeZoneOffset)>11)?"PM":"AM";
};
this.timer.onTick=_1.draw;
},{set:function(dt){
this.date=dt;
if(!this.timer.isRunning){
this.draw();
}
},start:function(){
this.timer.start();
},stop:function(){
this.timer.stop();
},_initPoly:function(_6,_7){
var _8=_6.createPath();
var _9=true;
dojo.lang.forEach(_7,function(c){
if(_9){
_8.moveTo(c.x,c.y);
_9=false;
}else{
_8.lineTo(c.x,c.y);
}
});
return _8;
},_placeHand:function(_b,_c,_d){
var _e={dx:this.center.x+(_d?_d.dx:0),dy:this.center.y+(_d?_d.dy:0)};
return _b.setTransform([_e,dojo.gfx.matrix.rotateg(-_c)]);
},placeHour:function(h,m,s){
var _12=30*(h+m/60+s/3600);
this._placeHand(this.hands.hour,_12);
this._placeHand(this.shadows.hour.shadow,_12,this.shadows.hour.shift);
},placeMinute:function(m,s){
var _15=6*(m+s/60);
this._placeHand(this.hands.minute,_15);
this._placeHand(this.shadows.minute.shadow,_15,this.shadows.minute.shift);
},placeSecond:function(s){
var _17=6*s;
this._placeHand(this.hands.second,_17);
this._placeHand(this.shadows.second.shadow,_17,this.shadows.second.shift);
},init:function(){
if(this.domNode.style.position!="absolute"){
this.domNode.style.position="relative";
}
while(this.domNode.childNodes.length>0){
this.domNode.removeChild(this.domNode.childNodes[0]);
}
this.domNode.style.width="150px";
this.domNode.style.height="150px";
this.surface=dojo.gfx.createSurface(this.domNode,150,150);
this.surface.createRect({width:150,height:150});
this.surface.createImage({width:150,height:150,src:this.image+""});
var hP=[{x:-3,y:-4},{x:3,y:-4},{x:1,y:-27},{x:-1,y:-27},{x:-3,y:-4}];
var mP=[{x:-3,y:-4},{x:3,y:-4},{x:1,y:-38},{x:-1,y:-38},{x:-3,y:-4}];
var sP=[{x:-2,y:-2},{x:2,y:-2},{x:1,y:-45},{x:-1,y:-45},{x:-2,y:-2}];
this.shadows.hour.shadow=this._initPoly(this.surface,hP).setFill([0,0,0,0.1]);
this.hands.hour=this._initPoly(this.surface,hP).setStroke({color:this.handStroke,width:1}).setFill({type:"linear",x1:0,y1:0,x2:0,y2:-27,colors:[{offset:0,color:"#fff"},{offset:0.33,color:this.handColor}]});
this.shadows.minute.shadow=this._initPoly(this.surface,mP).setFill([0,0,0,0.1]);
this.hands.minute=this._initPoly(this.surface,mP).setStroke({color:this.handStroke,width:1}).setFill({type:"linear",x1:0,y1:0,x2:0,y2:-38,colors:[{offset:0,color:"#fff"},{offset:0.33,color:this.handColor}]});
this.surface.createCircle({r:6}).setStroke({color:this.handStroke,width:2}).setFill("#fff").setTransform({dx:75,dy:75});
this.shadows.second.shadow=this._initPoly(this.surface,sP).setFill([0,0,0,0.1]);
this.hands.second=this._initPoly(this.surface,sP).setFill(this.secondHandColor);
this.surface.createCircle({r:4}).setFill(this.secondHandColor).setTransform({dx:75,dy:75});
this.topLabelNode=document.createElement("div");
with(this.topLabelNode.style){
position="absolute";
top="3px";
left="0px";
color=this.topLabelColor;
textAlign="center";
width="150px";
fontFamily="sans-serif";
fontSize="11px";
textTransform="uppercase";
fontWeight="bold";
}
this.topLabelNode.innerHTML=((this.date.getHours()+this.timeZoneOffset)>11)?"PM":"AM";
this.domNode.appendChild(this.topLabelNode);
this.labelNode=document.createElement("div");
with(this.labelNode.style){
position="absolute";
top="134px";
left="0px";
color=this.labelColor;
textAlign="center";
width="150px";
fontFamily="sans-serif";
fontSize="10px";
textTransform="uppercase";
fontWeight="bold";
}
this.labelNode.innerHTML=this.label||" ";
this.domNode.appendChild(this.labelNode);
this.draw();
},postCreate:function(){
this.init();
this.start();
}});
New to GrepCode? Check out our FAQ X