Foros del Web - Ver Mensaje Individual

KarlanKas · #**120** (**permalink**) 28/04/2003, 05:53

P.- Cómo poner un reloj analógico en mi web.
R.- En realidad este post es un ejemplo de como manejar grados con JS. Para ello he hecho este relojillo en el que

es la hora,

son los segundos y

los minutos.

Caricatos (hola campeón!!) tiene un ejemplo mucho más completo aunque tal vez un poco más complicado (por lo completo que es).

Lo he modificado un poco... ahora tiene manecillas!

11/11/2004
Lo he vuelto a modificar. Ahora es compatible con Mozilla, Firefox, Opera 7...

[ver ejemplo]

Ahí va!

Código PHP:

  <html>

<head>

<title>Reloj analogico</title>

<script>

//Script original de KarlanKas para Forosdelweb.com

 
 
var codigo="";

var incremento=-1

var radio=110

var radio2=100

radianes=(2*3.141592/360)

 
function crear(nombr,radi,hor,destin){

this.nombre=nombr;

this.radio=radi;

this.hora=hor;

this.destino=destin;

}

 
manecillas=new Array();

manecillas[0]=new crear("segundero",1,"segundo","http://www.forosdelweb.com/images/smilies/dedosabajo.gif");

manecillas[1]=new crear("minutero",0.8,"minuto","http://www.forosdelweb.com/images/smilies/dedosarriba.gif");

manecillas[2]=new crear("horero",0.5,"hora","http://www.forosdelweb.com/images/smilies/wink.gif");

 
// -------------- DIBUJAR MANECILLAS ---------------------------

for(numeroIconos=0;numeroIconos<5;numeroIconos++){

for(cadaManecilla=0;cadaManecilla<3;cadaManecilla++){

codigo+='<img id="'+manecillas[cadaManecilla].nombre+numeroIconos+'" style="z-index:2;position:absolute;top:-300px;" src="'+manecillas[cadaManecilla].destino+'">\n'}

}

//----------- PONER EL CENTRO DE LA ESFERA---------------------------------

 
codigo+='<img style="z-index:4;position:absolute;top:110px;left:110px;" src="http://www.forosdelweb.com/images/smilies/smile.gif">'

 
//------------- DIBUJAR ESFERA --------------------------

for(numero=0;numero<=359;numero+=30){

x=Math.floor((radio2)*Math.cos(radianes*numero));

y=Math.floor((radio2)*Math.sin(radianes*numero));

document.write('<img src="http://www.forosdelweb.com/images/smilies/risa.gif" style="position:absolute;left:'+(radio+x)+'px;top:'+(radio+y)

+'px">');

}

 
//------------------ MAQUINARIA DEL RELOJ --------------

 
function reloj(){

 
//-------------SABER LA HORA----------------

ahora=new Date();

 
document.title=ahora.toLocaleString()

 
segundo=ahora.getSeconds()*6

minuto=ahora.getMinutes()*6

hora=(ahora.getHours()*30)

 
hora+=(minuto/12)

 
//---------PONER 0 GRAD0S EN 90 GRADOS---------------

hora-=90;

minuto-=90;

segundo-=90

 
//-------MOVER LAS MANECILLAS---------------

 
for (a=0;a<99;a=a+20){

incremento++

for (m=0;m<3;m++){

manecilla=document.getElementById(manecillas[m].nombre+incremento);

eval("cosa="+manecillas[m].hora);

x=a*manecillas[m].radio*Math.cos(radianes*cosa);

y=a*manecillas[m].radio*Math.sin(radianes*cosa);

manecilla.style.left=x+radio+'px';

manecilla.style.top=y+radio+'px';

 
}

}

incremento=-1;

}

 
</script>

</head>

 
<body onload='reloj();window.setInterval("reloj()",50)'>

 
<script>document.write(codigo)</script>

 
</body>

</html>