SummArg | Cursos y recursos para webmasters

15/12/2010

Crear un reloj analógico con Javascript

Si bien hay muchos scripts para lograr el truco, muchos de ellos se apoyan sobre el CSS. En esta oportunidad veremos una de las tantas aplicaciones que tiene la librería Raphaël, creada para trabajar con gráficos vectoriales en la web y totalmente compatible con Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.

Emmanuele Feronato nos muestra cómo construir un reloj en base a esta librería y nos explica paso a paso las acciones que realiza en su código. Basicamente se trata de cargar la librería, dibujar el reloj e ir actualizando los segundos / minutos / horas.

También vale la pena echarle una mirada a gRaphaël, la librería para gráficos estadísticos.

	<head>
		<script type="text/javascript" src="raphael-min.js"></script>
		<script type="text/javascript">
 
			function draw_clock(){
				canvas = Raphael("clock_id",200, 200);
				var clock = canvas.circle(100,100,95);
			     clock.attr({"fill":"#f5f5f5","stroke":"#444444","stroke-width":"5"})
			     var hour_sign;
				for(i=0;i<12;i++){
					var start_x = 100+Math.round(80*Math.cos(30*i*Math.PI/180));
					var start_y = 100+Math.round(80*Math.sin(30*i*Math.PI/180));
					var end_x = 100+Math.round(90*Math.cos(30*i*Math.PI/180));
					var end_y = 100+Math.round(90*Math.sin(30*i*Math.PI/180));
					hour_sign = canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y);
				}
				hour_hand = canvas.path("M100 100L100 50");
				hour_hand.attr({stroke: "#444444", "stroke-width": 6});
				minute_hand = canvas.path("M100 100L100 40");
				minute_hand.attr({stroke: "#444444", "stroke-width": 4});
				second_hand = canvas.path("M100 110L100 25");
				second_hand.attr({stroke: "#444444", "stroke-width": 2});
				var pin = canvas.circle(100, 100, 5);
				pin.attr("fill", "#000000");
				update_clock()
				setInterval("update_clock()",1000);
			}
 
			function update_clock(){
				var now = new Date();
				var hours = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();
				hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
				minute_hand.rotate(6*minutes, 100, 100);
				second_hand.rotate(6*seconds, 100, 100);
 
			}
 
		</script>
 
	</head>
	<body>
		<div id="clock_id"></div>
		<script>draw_clock()</script>
	</body>
</html>


Dejar un comentario

  1. Hola que tal, sabes? logré hacer el reloj pero el detalle es que la hora que me da es toda loca, es decir pareciera que los segundos y el minutero va en reversa pero si me mantengo haciendo F5 para refrescar la pagina si se actualiza con la hora de la computadora pero si lo dejo solo entonces nunca me da la hora. No sabes si se deba a la libreria o sera otro detale que no se acomodar. Gracias por tu ayuda Saludos

  2. Efectivamente, el código del artículo no es correcto, lo era, pero una actualización de la librería lo deja inservible. Tal como comenta Nekko, en la página suministrada, está la solución.

Dejar un comentario