Efecto teletipo con Javascript

Se trata de un pequeño script que presenta una frase en pantalla letra a letra, como los (muy) antiguos teletipos usados en telgrafía o lás antiguas maquinas de escribir.

Solución

<script>

function teletipo(cad, tmp, iden, cnt) {

    if (cnt== null) cnt=0;

    var letra = cad.substr(cnt,1)

    cuadro=document.getElementById(iden);

    while (letra == " ")

      {

      cnt++;

      letra += cad.substr(cnt,1);

     }

    cuadro.innerHTML += letra;

    cnt++

    if (cnt < cad.length){

       tempor=setTimeout(teletipo,tmp,cad,tmp,iden,cnt);

     }

}

</script>

<body >

<h2 id="marco"></h2>

<script language="javascript">

teletipo("Javascript: Aprende desde cero", 50, 'marco')

</script>

</body>

Explicación

El funcionamiento de este script muestra el uso del temporizador en Javascript para escribir una frase letra a letra.

En el cuerpo de la página tenemos un bloque div con el valor marco en el aributo id. Aquí es donde se escribirá la frase letra a letra

El temporizador (setTimeOut) llama repetidamente a la función teletipo() que extrae una letra de la frase que queramos escribir y la coloca a continuación de lo que ya está escrito en el cuadro marco. Si no ha escrito la última letra de la frase se vuelve a activar el temporizador que vuelve a llamar a la función (con una unidad más en el contador de letras cnt) y pase a escribir la siguiente letra.

Como véis la función teletipo() se llama con varios argumentos:
cad : La frase que queremos escribir
tmp :El intervalo de tiempo hasta la siguietne letra
iden : El nombre del marco en el que escribir
cnt   : El lugar de la letra que le toca ser escrita.

Algunos detalles que observaréis: la primera vez que llamamos a la función teletipo no le ponemos el último argumento, pues la frase siempre se empezará a escribir desde la primera letra.

Hay un bucle para no temporizar los espacios, si no parece que el ritmo de escritura es irregular.

Como lo uso

El uso de este script en vuestras páginas es tan simple como vemos en este código de la izquierda. Como decíamos arriba en el cuerpo se debe colocar un bloque con un valor en el atributo ID.

La llamada a la función teletipo debes hacerla después de que hayas colocado el bloque en el que vas a escribir.

También podrías haber colocado la llamada en la etiqueta body con un evento onload, algo así:

<body onload="teletipo('Espacio Latino', 50, 'marco')">

De esta manera el efecto comenzará a funcionar cuando se haya cargado la página completa, y estás seguro de que el marco de destino del texto ya está colocado en su lugar. En fin prueba las formas que se te ocurran.