Ver Mensaje Individual
  #121 (permalink)  
Antiguo 28/04/2003, 05:53
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
122.- Cómo poner un reloj analógico en mi web

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> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 04/01/2005 a las 11:46