Mi proyecto consta de un html y un archivo js que simulan el funcionamiento de un reloj analogico. Funciona correctamente pero quisiera no tener que hacer mención a la funcion js desde el html () como lo tengo y buscar una alternativa haciendo referencia desde un script por ejemplo solamente y añadir una llamada o un método en el archivo js que lanze la funcion
html:
<body onload="funcionReloj()">
<div id="cajacontenido">
<div id="aplicacion">
<div id="CajaReloj">
<img id="segundos" src="./IMG/Aguja3.png" alt="Manilla segundos reloj" />
<img id="minutos" src="./IMG/Aguja2.png" alt="Manilla pequeña reloj" />
<img id="hora" src="./IMG/Aguja1.png" alt="Manilla grande reloj" />
</div>
</div>
</div>
Y en cuanto a mi archivo js:
function funcionReloj() {
var momentoActual = new Date();//Crea hora
var horaActual = momentoActual.getHours();//Extraemos Hora
var minutoActual = momentoActual.getMinutes();//Extraemos Minutos
var segundoActual = momentoActual.getSeconds();//Extraemos Segundos
//Identificadores para elementos
var hora = document.getElementById('hora');
var minutos = document.getElementById('minutos');
var segundos = document.getElementById('segundos');
function cambiarHora() {
//Calcular grados por hora (30deg cada hora, 30*12=360º)
var horaActualGrados = horaActual * 30 + "deg";
hora.style.transform = "rotate(" + horaActualGrados + ")";
//Calcular grados cada minuto (6deg cada minuto, 6*6=360º)
var minutoActualGrados = minutoActual * 6 + "deg";
minutos.style.transform = "rotate(" + minutoActualGrados + ")";
}
function cambiarSegundos() {
//Calcular grados cada segundo (6deg cada segundo, 6*6=360º)
var segundoActualGrados = segundoActual * 6 + "deg";
segundos.style.transform = "rotate(" + segundoActualGrados + ")";
}
cambiarHora();
cambiarSegundos();
//Actualizar reloj
setTimeout("funcionReloj()",1000);
//Actualizar reloj cada segundo
// setTimeout("cambiarSegundos()",1000);
}
Gracias