[Recurso-Ajax] Polar Clock, El reloj para Geeks

alexnava enero 5, 2016 0 Comentarios

Realmente las capacidades de Javascript parece que crecen de manera exponencial dia con dia,

Esta vez en Ajaxian, no comenta que se “agrat” a desarrollado un reloj muy curioso usando solamente Javascript.

Para poder usarlo necesitamos disponer de las librerias Prototype 1.6.0.2 y Canvas.

La implentacion es con el siguiente codigo Javascript el cual usando el metodo Draw.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
	  draw:function(){
		this.clearCanvas();
		var w = 20;
		var r = 260;
		this.date = new Date();
		var cr = r;
		$('labels').update()
		$w("month day weekday space hour min second").reverse().each(function(interval){
			cr = cr - w - w/2;
			if(interval != 'space') 
			{
				var ir = this.intervalToDegrees[interval].bind(this.date)();
				var i = ((ir / 360) * 255) + 147;
				var radians = ir.toRadians();
				var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
				this.drawSolidArc(color, cr, w, radians);			
				$('labels').insert(this.getIntervalLabel[interval].bind(this.date)() + '<br />');
			}
		}.bind(this));
	},

UTILIDAD?.

Talvez no mucha, para algunos, para otros muchisima, pero vamos les puse el codigo para que vean todo el gran potencial del que dispone Javascript, he imaginense todo lo que podamos hacer tan solo con Javscript.

Via | Canvas Polar Clock
Demo | http://snipersystems.co.nz/community/polarclock/polar.html