1

Tengo un trabajo que consiste en hacer un encabezado que diga: "bienvenido. Diseño web con: html css javascript". ya lo hice usando javascript pero necesito que mi encabezado se desarrolle de forma infinita.

ya usé la propiedad infinite para que mi encabezado sea constante pero no sirve.

Este es mi código:

<style>
        * {padding:0;margin:0;}
        .div{width: 100%;height: 100vh;color: green;border: 1px solid coral;box-sizing: border-box;}
        .div2{margin: auto; width: 70%;height: auto;color: green;border: 1px solid coral;box-sizing: border-box;
        text-align: center;font-size: 1.8em;margin-top:30px;padding: 20px;}

    </style>
</head>
<body>
    <div class="div">

        <div id="hijo" class="div2"></div>


        <script>
            function mifuncion(){
           /*las funciones dentro de mi funcion se van a cumplir con un retrazos de tiempo de dos segundos uno mayor 
            * que el otro*/
          setTimeout(primero, 2000);
          setTimeout(segundo, 4000);
          setTimeout(tercero, 6000);/*tengo en mi funcion anidada muchas */
          setTimeout(cuarto, 8000);/*funciones las cuales van a ser invocadas*/
          setTimeout(quinto, 10000);
          setTimeout(sexto, 12000);

        };
        function primero(){
                document.getElementById("hijo").innerHTML="bienvenidos";
            }
             function segundo(){
                document.getElementById("hijo").innerHTML="Diseo web con:";
            }
             function tercero(){
                document.getElementById("hijo").innerHTML="HTML";
            }
             function cuarto(){
                document.getElementById("hijo").innerHTML="CSS";
            }
             function quinto(){
                document.getElementById("hijo").innerHTML="JAVASCRIPT";
            }
            function sexto(){
                document.getElementById("hijo").innerHTML="Diseo web con:<br>html css javascript";
            }

            var myvar = document.getElementById("hijo");
            myvar.addEventListener("mouseover",mifuncion);
        </script>
    </div>
</body>

1
  • 4
    a que te refieres con "hacer infinito"?
    – jolsalazar
    Commented el 18 dic. 2019 a las 15:10

1 respuesta 1

0

Creo que puedes optimizarlo de la siguiente forma

var index = 0;
//Generas una array para los diferentes titulos, en orden
var titles = [
    "Bienvenido",
    "Diseño web"
];
//Aqui puedes correr la funcion inicial sin utilizar mouseover
mifuncion();

function mifuncion() {
    // Se ejecuta el primer cambio
    changeTitle();
    //setInterval hace lo mismo que setTimeout pero en ciclos
    setInterval(changeTitle, 2000);
}

function changeTitle () {
     //Se obtiene el texto de la lista
     var text = titles[index];
     //Se incrementa el índice para el array
     index++;
     if (index >= titles.length) {
         //Si el índice es mayor que la cantidad de titulos, se reinicia
         index = 0;
     }
     document.getElementById("hijo").innerHTML = text;
}
4
  • Lo hice tal como esta allí pero no ejecuta el código. Commented el 19 dic. 2019 a las 3:04
  • Creo que tengo un atajo que no había pensado antes. si pongo el div hijo en un width del 100% y y el height vh significaria que el usuario permanecería haciendo mouseover a cada rato y el código se ejecutaría por doquier. Commented el 19 dic. 2019 a las 3:11
  • No, es mala práctica, comenta que errores te arroja la consola Commented el 19 dic. 2019 a las 3:56
  • Si copiaste mi código tal cual, tenia un error por un caracter, mandaba llamar a mifunction cuando en realidad era a mifuncion; prueba con mi nuevo cambio Commented el 19 dic. 2019 a las 3:57

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.