Crear un reloj analógico con Javascript

El siguiente reloj puede ser creado sin necesidad de usar imágenes ni CSS, gracias a una librería en Javascript llamada Raphaël que nos permite crear gráficos de una manera sencilla.

<script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/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>
 <body>
 <div id="clock_id"></div>
 <script>draw_clock()</script>
 </body> 

Visto en el blog de Emanuele Feronato

  4 Comentarios

  1. Stephan   •  

    Como puedo añadir 2 relojes en un documento HTML sin tener un script conflict?

  2. JM   •  

    Hola Brian 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

  3. Brian Urban   •     Autor

    xD dentro de cuenta ir a configuración de la cuenta y ahí hay una parte que dice Seguridad de la cuenta, allí te muestra alguna información desde donde han accedido con esta cuenta.

  4. NINA   •  

    Sos un kapo!
    No entiendo ni jota nade de lo que hacés, pero me quedé alucinada con la escritura al reves.
    Decime: hay alguna manera de saber en qué momento una persona a quien le di mi contraseña de facebook, entra a mirarlo?
    Me tiene desconcertada, ya que nunca lo puedo pescar… No sé cómo lo hace…

    Gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *