Esta entrada es de nivel avanzado y si no se tiene algo de idea de programación puede ser un poco difícil, por lo que os pido algo de paciencia a los que no tengais tanta experiencia con el tema.
Explicarlo por aquí supone un par de dificultades añadidas, ya que no puedo disponer de carpetas al uso, ni estructurar los elementos e imágenes como en mi ordenador, así que os pido paciencia.
Dentro escribireis el código, que consta de tres partes.
La primera parte es código HTML. Básicamente consiste en un contenedor con las cuatro imágenes que vamos a usar y que corresponden a las tres agujas del reloj y a la esfera de fondo.
<html>
<body>
<div id="analog">
<img class="hour" id="fondo" src="img/relscreen.png" alt="" title=""/>
<img class="hour" id="segundero" src="img/seg.png" alt="" title=""/>
<img class="hour" id="minutero" src="img/min.png" alt="" title=""/>
<img class="hour" id="hora" src="img/hor.png" alt="" title=""/>
</div>
</body>
</html>
Ahora no voy a extenderme con cuestiones de programación, ya que esto se haría eterno, por lo que me limitaré a los pasos que hay que dar para que el código funcione.
Del código anterior solo teneis que cambiar la ruta de las imágenes.
Las imágenes son estas etiquetas <img class="hour" id="fondo" src="img/relscreen.png" alt="" title=""/> y como veis hay cuatro distintas, que son una para el fondo y tres para las agujas de las horas, minutos y segundos. Podeis saber cual es cual porque el atributo "id" tiene asignado un nombre distinto para identificarlas. esto no solo sirve para que el usuario sepa cual es cual, sino también para poder decirle al ordenador con qué elemento queremos interactuar al programarlo.
Para cambiar la ruta de las imágenes solo hay que sustituir el contenido entre comillas del atributo "src" (abreviativo de source, que quiere decir fuente) por la ruta donde tengamos cada elemento, eso si, a partir de la posición del archivo donde tenemos el código. Esto quiere decir que si tenemos nuestro archivo en C:\Users\Kame2\Desktop\Reloj analógico HTLM\reloj.html y la imagen en C:\Users\Kame2\Desktop\Reloj analógico HTLM\img\minutero.png, la ruta a escribir solo será img\minutero.png, quedando de la siguiente manera src="img/minutero.png". En caso de ser una dirección de internet, solo hay que ponerla tal cual del navegador y quedaría parecido a esto: src="https://www.ejemplo.es/imagenaguja.png".
Ahora la segunda parte del código.
Vamos a pegar el estilo o CSS, justo debajo de todo lo anterior.
<style>
.hour{position:absolute;left:250px;top:50px;}
</style>
La linea fundamental es .hour{position:absolute;left:250px;top:50px;}. Ya que es la que hará que todas las imágenes se mantengan una encima de otra. El valor de left puede ser ajustado para desplazarlo a través de la página horizontalmente, y top para hacerlo verticalmente. Puedes usar números negativos para desplazar en la dirección opuesta si es necesario.
<script>
var seg = 0;
var min = 0;
var hor = 0;
segundos();
var avance = setInterval('segundos()',1000);
function segundos ()
{
seg = ((new Date().getSeconds())*6);
document.getElementById("segundero").style.transform = "rotate("+seg+"deg)";
min = ((new Date().getMinutes())*6);
document.getElementById("minutero").style.transform = "rotate("+min+"deg)";
hor = ((new Date().getHours())*30);
document.getElementById("hora").style.transform = "rotate("+hor+"deg)";
}
</script>
Aunque solo necesitais copiar y pegar, esto no tiene gracia sin su parte didáctica, así que os explicaré como funciona.
Primero se declaran las variables donde vamos a guardar los segundos, minutos y horas y las iniciamos con cero como valor por defecto.
var seg = 0;
var min = 0;
var hor = 0;
Después llamaremos a la función que vamos a crear para ejecutarla nada más cargar la página y que no se produzca un retraso. Esta función es la que se encarga de colocar las manillas del reloj a la hora que toca, pero lo hace solo una vez cada vez que se llama, por lo que es comosi se parara en el tiempo tras llamarla.
segundos();
Para crear la ilusión de que avance, hay que llamar a la función cada cierto tiempo para que vaya moviéndose. En este caso, la llamamos a cada segundo, de tal forma que cada vez que pase un segundo, se actualize y cambie. Para eso usamos setInterval() y, como puede verse, dentro de los paréntesis tenemos dos atributos. El primero llama a la función que quiere ejecutar y el segundo establece el tiempo cada cuanto tiene que ejecutarse en milisegundos. Como queremos que se ejecute cada segundo y un minuto son mil milisegundos, tenemos que poner el número 1000.
var avance = setInterval('segundos()',1000);
Ahora solo nos queda la función en sí misma. Aunque veais mucha linea, es sencillo, ya que se repite el mismo proceso tres veces, una por cada aguja.
Primero hay que calcular donde tiene que estar la manilla y, para eso, tenemos que saber los segundos, minutos o horas. El proceso es el mismo para los tres y solo varía el comando último.
Para asignar el valor correspondiente, se crea un elemento "Date" y de el, se extrae el dato de los segundos. esto se hace con "new Date().getSeconds()" pero eso no será suficiente,ya que para rotar la imagen, el número que nos pedirá será un grado de inclinación. Mientras que una vuelta completa de segundero son 60 segundos, una vuelta completa de inclinación son 360 grados, por lo que hay que convertir los segundos a su equivalente en grados. para hacer eso, solo hay que multiplicar el resultado por seis.
Para los minutos y horas solo toca repetir el proceso sustituyendo "getSeconds()" por "getMinutes()" y "gethours()". En la conversión de tiempo a inclinación, los minutos siguen multiplicándose por seis por componer 60 minutos cada vuelta, pero las horas componen cada ciclo en 12 partes, por lo que el factor es de treinta en vez de seis.
Para calcular eso, solo hay que dividir un elemento por el otro, de tal manera que 360 grados entre 60 segundos dan seis grados por segundo y minuto, y 360 grados entre 12 horas dan 30 grados por hora.
Para aplicar el valor hay que alterar el parámetro rotate de la propiedad transform de CSS desde Javascript. Esto se hace desde la linea document.getElementById("segundero").style.transform = "rotate("+seg+"deg)"; Donde "segundero" es el nombre del atributo "id" de la aguja correspondiente y "seg" es la variable donde hemos metido el valorde rotación equivalente a la aguja de turno.
document.getElementById() se usa para seleccionar un elemento por su "id". La continuación "style" accede al estilo CSS de ese elemento y "transform" accede a dicho elemento de estilo. Para cambiar transform, puesto que el valor es una cadena de texto, ponemos entre comillas la parte fija y concatenamos entre los símbolos + la variable que contiene los grados a los que tiene que estar para simular la hora correspondiente.
function segundos ()
{
seg = ((new Date().getSeconds())*6);
document.getElementById("segundero").style.transform = "rotate("+seg+"deg)";
min = ((new Date().getMinutes())*6);
document.getElementById("minutero").style.transform = "rotate("+min+"deg)";
hor = ((new Date().getHours())*30);
document.getElementById("hora").style.transform = "rotate("+hor+"deg)";
}
Y esto es todo en cuanto al código!
En cuanto a las imágenes hay que hacerlas de una manera muy concreta. Hay que entender que van a rotar desde el centro justo de la imagen y que tienen que verse los elementos de detrás, por lo que se crearán las cuatro a partir de un cuadrado de exáctamente las mismas dimensiones y colocando el punto de rotación de cada elemento sobre el centro exacto del cuadrado. El fondo de todas ha de ser transparente, salvo la de las marcas que no es totalmente necesario si así lo deseas.
Es importante también colocarlas en el orden adecuado, especialmente si el fondo es opaco, para no tapar elementos que no debieran ser tapados.
Así es como se ve por separado:
Y así se ve todo junto:
HOLA ESTIMADO.
ResponderEliminarEXCELENTE EL CODIGO.
UNICO PROBLEMA QUE LA HORA INDICADA EN EL RELOJ DIFIERE DEL INDICADO EN SISTEMA. PUEDES AYUDARME A CORREGIR?
GRACIAS.
Ruben E. Leiss