9

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

2
  • pero si en tu archivo .php solo tienes código javascript por que no pasarlo a un archivo con extensión .js?
    – user128299
    Commented el 16 may. 2019 a las 20:14
  • He reformulado la pregunta que metí la pata..lo q tngo es un archivo js
    – Serantes
    Commented el 16 may. 2019 a las 20:18

2 respuestas 2

10

En lugar de poner el onLoad en la etiqueta, puedes ponerlo en tu fichero .js como un evento de la ventana. Cuando se cargue la ventana, lanza tu función. Algo como esto:

function tuFuncion() {
  // ....
  console.log("Se ejecutó al cargar");
}

window.addEventListener("load", tuFuncion);

Con addEventListener asocias el tipo de evento que quieres que lance la ejecución de la función (aquí puedes ver una lista de los tipos de eventos). En el código de arriba estás diciendo que cuando la ventana (window) se carge (load) se llame a una función (tuFuncion).

En tu caso sería así:

window.addEventListener("load", funcionReloj);
1
  • 1
    Gracias!, me ha servido tu respuesta!!
    – Serantes
    Commented el 16 may. 2019 a las 22:45
4

Similar a lo que ya te comentaron, quita el llamado a la función de la etiqueta body y asignalo al eventpo DOMContentLoaded pues este mismo se ejecuta cuando la página HTML esta totalmente cargada

Con lo que quedaría así tu ejercicio

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejempl</title>
    </head>
    <body>
    <body>
    
       <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>
    <script>
      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);
    }
      
      document.addEventListener("DOMContentLoaded", funcionReloj())
    </script>
    </body>
    </html>

Explicación

  • Es decir primero va todo el código que logra la funcionalidad del reloj
  • Posterior agregamos un listener al document para verificar cuando todo el documento este listo
  • Como segundo argumento pasamos el nombre de la función principal que es funcionReloj()

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.