Skip to main content
se eliminaron 10 caracteres en el cuerpo
Origen Enlace
lromeraj
  • 2k
  • 1
  • 16
  • 32

Lo que estoy haciendo es un efecto que hace parecer un texto que se escribe por si solo, el código que tengo es el siguiente:

Es un simple <body> con dos elementos para ver el ejemplo (también en: jsfiddle).

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = "" + writer + "";writer;
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>

La duda que tengo es que no sé si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste... en eso es en lo que estoy dando vueltas.

Lo que estoy haciendo es un efecto que hace parecer un texto que se escribe por si solo, el código que tengo es el siguiente:

Es un simple <body> con dos elementos para ver el ejemplo (también en: jsfiddle).

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = "" + writer + "";
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>

La duda que tengo es que no sé si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste... en eso es en lo que estoy dando vueltas.

Lo que estoy haciendo es un efecto que hace parecer un texto que se escribe por si solo, el código que tengo es el siguiente:

Es un simple <body> con dos elementos para ver el ejemplo (también en: jsfiddle).

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = writer;
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>

La duda que tengo es que no sé si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste... en eso es en lo que estoy dando vueltas.

Es más práctico cuando se puede ejecutar en la misma pregunta. Conviene usar un Snippet
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

Es un simple <body> con dos elementos para ver el ejemplo

HTML: (también en: jsfiddle).

<body>
    <button id="write" type="button">Write!</button>
        <h1 id="text"></h1>
</body>

JS:

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = "" + writer + "";
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>
$("#write").click(function() {
    
    //Es un fragmento de texto extraido del periódico "El país"
    var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";
    
    var writer = ""; writer.length = 0; //Limpiar el string
    var maxLength = text.length;
    var count = 0;
    var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres
    
        var write = setInterval(function() {
            
            if (count > text.length) { clearInterval(write); }
            
            writer += text.charAt(count);
            document.getElementById("text").innerHTML = "" + writer + "";
            count++;
        
        }, speed);

    $("#write").click(function() { clearInterval(write); }); //si se pulsa en el botón limpiar el intervalo

});
 

La duda que tengo es que no se si estoy usando el método correcto para hacerlo, es. Es decir, no tengo claro si sería mejor usar el loop forfor, o usar setIntervalsetInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso forfor tendré que introducir un setTimeoutsetTimeout dentro de esteéste... en eso es en lo que estoy dando vueltas.....

Ejemplo en: jsfiddle

¡Gracias por cualquier ayuda!

Es un simple <body> con dos elementos para ver el ejemplo

HTML:

<body>
    <button id="write" type="button">Write!</button>
        <h1 id="text"></h1>
</body>

JS:

$("#write").click(function() {
    
    //Es un fragmento de texto extraido del periódico "El país"
    var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";
    
    var writer = ""; writer.length = 0; //Limpiar el string
    var maxLength = text.length;
    var count = 0;
    var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres
    
        var write = setInterval(function() {
            
            if (count > text.length) { clearInterval(write); }
            
            writer += text.charAt(count);
            document.getElementById("text").innerHTML = "" + writer + "";
            count++;
        
        }, speed);

    $("#write").click(function() { clearInterval(write); }); //si se pulsa en el botón limpiar el intervalo

});

La duda que tengo es que no se si estoy usando el método correcto para hacerlo, es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de este... en eso es en lo que estoy dando vueltas.....

Ejemplo en: jsfiddle

¡Gracias por cualquier ayuda!

Es un simple <body> con dos elementos para ver el ejemplo (también en: jsfiddle).

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = "" + writer + "";
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>
 

La duda que tengo es que no si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste... en eso es en lo que estoy dando vueltas.

se añadió 1 carácter en el cuerpo
Origen Enlace
lromeraj
  • 2k
  • 1
  • 16
  • 32

Es un simlesimple <body> con dos elementos para ver el ejemplo

Es un simle <body> con dos elementos para ver el ejemplo

Es un simple <body> con dos elementos para ver el ejemplo

título editado; título editado
Enlace
lromeraj
  • 2k
  • 1
  • 16
  • 32
Loading
Origen Enlace
lromeraj
  • 2k
  • 1
  • 16
  • 32
Loading