-
Notifications
You must be signed in to change notification settings - Fork 31
/
svg.clock.min.js
2 lines (2 loc) · 2.08 KB
/
svg.clock.min.js
1
2
/* Clock.svg v0.1 (c) 2013 Wout Fierens - Svg.js is licensed under the terms of the MIT License */
SVG.Clock=function(e,t){var n,r;r={plate:"#FFFFFF",marks:"#111111",label:"#B1B2AF",hours:"#222222",minutes:"#2A2A2A",seconds:"#D40000"};t=t||{};for(n in t)r[n]=t[n];this.full={hours:0,minutes:0,seconds:0};this.time={hours:0,minutes:0,seconds:0};this.constructor.call(this,SVG.create("svg"));this.viewbox(0,0,100,100);this.size(e,e);this.plate=this.ellipse(100,100).fill(r.plate);for(n=11;n>=0;n--)this.rect(3,10).move(48.5,1).fill(r.marks).rotate(n*30,50,50);for(n=59;n>=0;n--)if(n%5!=0)this.rect(1.2,3.6).move(49.4,1).fill(r.marks).rotate(n*6,50,50);var i=this.label=this.text("svg.js").move(50,70).fill(r.label).attr("style","cursor:pointer;").font({anchor:"middle",size:6,family:"Helvetcia Neue, Helvetcia, Arial",weight:"300"}).click(function(){window.location.href="http://svgjs.com"});this.hours=this.rect(5,45).move(47.5,15).fill(r.hours);this.minutes=this.rect(4,54).move(48,4).fill(r.minutes);this.seconds=this.group().move(50,50).add(this.rect(1.5,50).move(-.75,-37.5).fill(r.seconds)).add(this.circle(9).move(-4.5,-38).fill(r.seconds));this.update(0)};SVG.Clock.prototype=new SVG.Container;SVG.extend(SVG.Clock,{start:function(){var e=this;setInterval(function(){e.update()},1e3);return this},update:function(e){var t=new Date;if(e==null)e=300;this.setHours(t.getHours(),t.getMinutes()).setMinutes(t.getMinutes(),e).setSeconds(t.getSeconds(),e);return this},setHours:function(e,t){this.time.hours=e;this.hours.rotate(360/12*((e+t/60)%12),50,50);return this},setMinutes:function(e,t){if(e==this.time.minutes)return this;this.time.minutes=e;if(e==0)this.full.minutes++;var n=this.full.minutes*360+360/60*e;if(t)this.minutes.animate(t,SVG.easing.elastic).rotate(n,50,50);else this.minutes.rotate(n,50,50);return this},setSeconds:function(e,t){this.time.seconds=e;if(e==0)this.full.seconds++;var n=this.full.seconds*360+360/60*e;if(t)this.seconds.animate(t,SVG.easing.elastic).rotate(n,50,50);else this.seconds.rotate(n,50,50);return this}});SVG.extend(SVG.Container,{clock:function(e){return this.put(new SVG.Clock(e))}})