Ayuda - Simplificación de "código" basto jj

WildFroVII · #1 (**permalink**) 25/08/2008, 21:29

Bueno, aquí os dejo un "código" con el que he conseguido el efecto deseado. Sólo hay un contador atrás hecho con javascript que se repite y repite en todos los documentos, iframes, y páginas html con una sóla letra cada.

Principal.html - Inovoca a todos los iframes

Iframes - Invocan al documento, del primero al último, los cuales contienen sólo una letra, con un retardo creciente de 100ms entre cada uno.

http://www.sendspace.com/file/skuz8o (pass: HOLA)

Y lo conseguido es que parezca que se escribe a máquina en directo.

El problema es que para mi ordenador que no es demasiado antiguo: PIV 2,4, 768Ram. le es un esfuerzo como para que se quede colgado en dos ocasiones, destruyénose así la idea tal y como la tenía pensada, para pcs máslentos ni me quiero imaginar. Por eso a ver si alguien me dijera un codiguito sencillo con el que lograr el mismo efecto sin saturar tanto el pc, sin iframes si fuera, como sea, pero que parezca que se escribe a máquina.

Supongo que con javasript conocido, no harán falta más de 10 lineas o 15, y de alguna forma que luego haya que poner entre {} el texto que se quiere, porque aunque funcionase como yo lo hago, sólo ese poquito que se ve en la descarga, me ha llevado unas 3 horas preparalo, y tengo un poco de prisa.

Espero que alguien me ayude.

Panino5001 · #2 (**permalink**) 25/08/2008, 21:37

No descargué lo que estás usando (hubiera sido mejor que subieras un ejemplo funcionando), de manera que no sé si es lo que querés, pero fijate si esto te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
var desde=0,i=0,maximocaracteres=10,mensaje='esto es un ejemplo';; 
function mostrar() { 
    var descr=document.getElementById('pp').innerHTML; 
    if(descr.length>maximocaracteres)desde++; 
    if(i>=maximocaracteres)i=maximocaracteres; 
    if(desde>=mensaje.length-maximocaracteres) { 
        desde=0; 
        i=0; 
    }else{ 
            i++; 
    } 
    document.getElementById('pp').innerHTML =mensaje.substr(desde, i); 
    if(mensaje.length<=maximocaracteres) 
        document.getElementById('pp').innerHTML =mensaje; 
} 
function inicio(){ 
    setInterval('mostrar()',250); 
} 
window.onload=inicio; 
</script> 
</head> 
 
<body> 
<div id="pp"></div> 
</body> 
</html>

Fuzzylog · #3 (**permalink**) 26/08/2008, 01:36

lo que vi el ejecutar el código es que el texto mostrado se corta en un cierto punto y además el texto inicial va desapareciendo. Para solucionarlo es necesario jugar con el tamaño de maximocaracteres. Así que modifiqué la siguiente línea:

var desde=0,i=0,maximocaracteres=54,mensaje='esto es un ejemplo de simulación de escritura a máquina';

WildFroVII · #4 (**permalink**) 26/08/2008, 07:23

Bueno, lo que pasa es que se carga tantísimo, que es imposible que se reproduzca colgado en internet. si os paso el archivo es para que lo vieséis en vuestros pcs.

El código que me habéis dejado no está mal.

Ver

Lo único que comparándolo con lo que quiero conseguir....

Video

(sólo es un mega de video)....no es exactamente lo mismo, porque no tendría que repetirse sin fin el que aprezcan las letras desde el principio al llegar hasta el final, si no una sola vez.

Si alguien me hace el favor de añadir lo que falta, :), se lo delvolveré en cuanto pueda. De verdad, esto es muy importante y como importante que es, lo es

Si alguien dispuesto a ayudarme mejor, me quiere agregar al messenger, es [email protected]

Panino5001 · #5 (**permalink**) 26/08/2008, 08:02

En ese caso fijate si te sirve esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
var mensaje='esto es un ejemplo',pausa=300;
function inicio(){
    var i=0;
    var m=mensaje.split('');
    var t=setInterval(
        function(){
            if(i>=m.length-1)clearInterval(t);
            document.getElementById('pp').innerHTML+=m[i];i++;
        },pausa
    );
}
window.onload=inicio;
</script>
</head>

<body>
<div id="pp"></div>
</body>
</html>

Y leé las normas del foro acerca de la invitación de seguir los temas de manera privada-

WildFroVII · #6 (**permalink**) 26/08/2008, 08:40

Muy bueno, muchas gracias.

Sólo una cosa más, debido a que esá situado el script en head, no puedo poner lineas de separación entre párrafos que quiera que sean diferentes.

¿Cómo podría hacer?

Me tengo que poner aprender javasript, lo que pasa es que no puedo hacerlo ahora, porque la web para la que es esto, tiene que estar para dentro de 4 días preparada.

Un saludo.

Panino5001 · #7 (**permalink**) 26/08/2008, 08:48

En ese caso usá el tag pre y \n para los saltos:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
var mensaje='esto es un ejemplo\nesto es un ejemplo\nesto es un ejemplo\nesto es un ejemplo\n',pausa=300; 
function inicio(){ 
    var i=0; 
    var m=mensaje.split(''); 
    var t=setInterval( 
        function(){ 
            if(i>=m.length-1)clearInterval(t); 
            document.getElementById('pp').innerHTML+=m[i];i++; 
        },pausa 
    ); 
} 
window.onload=inicio; 
</script> 
</head> 
 
<body> 
<pre id="pp"></pre> 
</body> 
</html>

Panino5001 · #8 (**permalink**) 26/08/2008, 09:24

Explorer no toma bien los saltos, de manera que hay que ensuciar el código, reemplazando los saltos por un caracter cualquiera (_, en este ejemplo):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
var mensaje='esto es un ejemplo_esto es un ejemplo_esto es un ejemplo_esto es un ejemplo_',pausa=300;
function inicio(){
    var i=0;
    var m=mensaje.split('');
    var t=setInterval(
        function(){
            if(i>=m.length-1)clearInterval(t);
            if(m[i]=='_')m[i]='<BR>';
            document.getElementById('pp').innerHTML+=m[i];i++;
        },pausa
    );
}
window.onload=inicio;
</script>
</head>

<body>
<div id="pp"></div>
</body>
</html>

De manera que ya es lo mismo usar o no pre.

WildFroVII · #9 (**permalink**) 26/08/2008, 10:06

fallo..........

WildFroVII · #10 (**permalink**) 26/08/2008, 10:07

Usted dirá que es lo que pasa....

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;  
 
charset=iso-8859-1" /> 
<title>test</title> 
<script> 
var mensaje='Vuestra especie es un tanto excéptica respecto a  
 
nuestra/nexistencia, pero que no se les ocurra decirme que soy un  
 
perro muy listo, porque/nExistimos, claro que existimos./n',pausa=50; 
function inicio(){ 
    var i=0; 
    var m=mensaje.split(''); 
    var t=setInterval( 
        function(){ 
            if(i>=m.length-1)clearInterval(t); 
            document.getElementById('pp').innerHTML+=m[i];i++; 
        },pausa 
    ); 
} 
window.onload=inicio; 
</script> 
</head> 
 
<body> 
<pre id="pp"></pre> 
</body> 
</html>

(No me hace el salto entre lineas. Con tu ejemplo si, pero al cambiarle el contenido del mensaje por este, no lo hace.:|)

David · #11 (**permalink**) 26/08/2008, 10:11

Es que está mal, debes colocar todo en la misma línea de lo contrario dará error:

Código PHP:

  var mensaje='Vuestra especie es un tanto excéptica respecto a\nnuestra existencia, pero que no se les ocurra decirme que soy un\nperro muy listo, porque Existimos, claro que existimos.\n',pausa=50;

WildFroVII · #12 (**permalink**) 26/08/2008, 10:20

Te quiero tío. ¡Te quiero!

Pero a ver si alguien supiera una cosa más (con esto acabo ya, lo juro). Imaginad este texto.

"Hola, estoy posteando en forosdelweb. No veáis lo listos que son los colaboradores de allí....

Hasta aquí un retardo de 100 ms para cada letra, pero ahora quiero que haya uno de 300 para hacer una pausa más grande tras el punto.....

....y de nuevo que vuleva a 100 ms para seguir como antes.

...Claro, por eso será que les tomaron como colaboradores, que es que estoy medio bobo :)"

WildFroVII · #13 (**permalink**) 26/08/2008, 14:15

La próxima vez esperaré 30 min. para contestar.

David · #14 (**permalink**) 26/08/2008, 14:30

En ese caso podrías usar setTimeout() para cada vez que escribes una parte del texto, y si encuentra un punto, aumentar el intervalo.

Pruébalo y nos cuentas.

WildFroVII · #15 (**permalink**) 26/08/2008, 15:54

No se nada de Javascript, aunque el SetTimeout fue lo que utilicé para hacer la versión neanthertal de esta simulación de scrito a máquina, pero como ponerlo en medio del código que me has dado, ni puta idea.

Código PHP:

  <html> 
 
<head> 
 
<script type="text/javascript"> 
 
function nombre() 
 
{ 
 
location.href="Letra - 21b/Letra - 21b.html" 
 
} 
 
setTimeout ("nombre()", 2000); 
 
</script> 
 
</head> 
 
<body bgcolor="green"> 
 
<p></p> 
 
</body> 
 
</html>

Con esto conseguía que a los 2000 milisegundos el docu html Letra21, se abriera en un iframe de 15x30, luego el 22 en 0,1 más, el 30, más alante. El ordenador no podía soportarlo, y subido a internet nada más que 4 lineas así, colgaban al equipo como nunca lo he visto navegando.

No se me ocurre como puedo aplicar el código este a lo que me concierne ahora.

David · #16 (**permalink**) 27/08/2008, 10:12

Bueno, si entendí lo que quieres hacer es que cada vez que encuentre un punto tarde más en volver a escribir, prueba con esto:

Código PHP:

  var i=0; 
var m=mensaje.split(''); 
function inicio(){ 
     if (i>=m.length-1) return; 
     document.getElementById('pp').innerHTML+=m[i];
     if (m[i] != ".") {
        setTimeout("inicio()", pausa)
     } else {
         setTimeout("inicio()", pausa * 3)
      }
     i++; 
}

WildFroVII · #17 (**permalink**) 27/08/2008, 12:56

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gesnic se presenta</title>
<script>
var mensaje='Cuando se escribe en directo, al contrario de lo que pensaba, lo que hay que destacar no son las puntos o las comas, si no las paradas que hace el supuesto escritor mientras piensa, que puede venir en cualquier momento, aquí(.....), aquí(....), y no es plan de poner un punto. donde te plazca. o cuando. te de la gana.',pausa=50;  
function inicio(i){
    var m=mensaje.split('');
    var t=setInterval(
        function(){
            if(i>=m.length-1)clearInterval(t);
            document.getElementById('pp').innerHTML+=m[i];i++;
            if (m[i-1] == '.' || m[i-1] == ',') {
                clearInterval(t);
                setTimeout("inicio("+i+")",500);
            }
        },pausa
    );
}
window.onload=inicio(0);
</script>
</head>

<body>
<pre id="pp"></pre>
</body>
</html>

Este es el resultado

¿Se puede hacer algo?

David · #18 (**permalink**) 28/08/2008, 07:53

No entiendo, el ejemplo que pusiste funciona como querías. ¿O qué es lo que quieres hacer?.

WildFroVII · #19 (**permalink**) 28/08/2008, 16:59

Resulta que al ver la web en funcionamiento, la simulación e que alguien está escribiendo en directo no queda nada realista, pues cuano se escribe, no se tiene porque parar en los puntos y en las comas, si no que puedes parar a veces, pero otras no, como parar también en momento en los que no hay ni punto ni coma, si no que simplemente estás pensando.

Por eso que el código que he puesto antes, si hace bien su función de parar en puntos y comas, pero no es el resultado el que realmente yo quería. Lo vi, y no me gustó por lo que acabo de decir. Se trataría de poder agregar algo en el momento que se quiera que haya pausa y que ese a ese algo a parte se le pueda definir el tiempo que debe estar detenido.

bye

Panino5001 · #20 (**permalink**) 28/08/2008, 20:20

Podrías usar claves dentro del texto para generar las pausas, en este caso, la clave de pausa es el guión bajo (cuantos más coloques uno a continuación del otro, más largas serán las pausas). También agregué una clave para los saltos de línea, ya que explorer los ignora si no lo hacés de esa manera. También la llamada a la función debe ser window.onload=inicio; (sin paréntesis ni parámetros, que igualmente no hacen falta si declarás a i como variable global). Probalo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Gesnic se presenta</title> 
<script> 
var mensaje='Cuando se escribe en directo,_ al contrario de lo que pensaba,_ lo $que hay que destacar no son las puntos o las comas,_ sino las paradas que $hace el supuesto escritor mientras____ piensa, que puede venir en cualquier $momento, aquí__, aquí_, y no es plan de poner un punto.____ donde te $plazca._____ o cuando._ te de la gana.$',pausa=50,i=0,pausador='_',salto='$';   
function inicio(){ 
    var f=0; 
    var m=mensaje.split(''); 
    var t=setInterval( 
        function(){ 
            if(i>=m.length-1)clearInterval(t); 
            if(m[i]==salto)m[i]='<br />'; 
            if(m[i]==pausador){m[i]='';f=1;} 
            document.getElementById('pp').innerHTML+=m[i];i++; 
            if (f == 1) { 
                clearInterval(t); 
                setTimeout("inicio()",500); 
            } 
        },pausa 
    ); 
} 
window.onload=inicio; 
</script> 
</head> 
 
<body> 
<div id="pp"></div> 
</body> 
</html>