2016-04-10 10 views
1

Ich versuche, einen einfachen Typ und Löschen-Effekt mit Javascript, aber nach dem Tipp-Effekt, löscht es den letzten Buchstaben und dann bekomme ich einen endlosen Bildschirm undefined. Hier ist mein Code:Simple Type und Erase-Effekt funktioniert nicht

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Typing Effect</title> 
</head> 
<body> 
<script type="text/javascript"> 


window.onload =function() { 
var texttotype = "this is what i want to type"; 
var typedtext = ""; 

function eraze(){ 

if(typedtext != ""){    
    var eraze = setInterval(function(){ 
     typedtext = typedtext.slice(0, typedtext.length -1);      
     document.getElementById('type-here').innerHTML = typedtext; 
      if (typedtext == "") { 
       clearInterval(eraze); 
       return 
      }    
     }, 200);   
} 
} 

if(typedtext == ""){ 
    var i = 0; 
    var id = setInterval(function(){ 
     if(typedtext != texttotype){ 
      typedtext +=texttotype[i]; 
     document.getElementById('type-here').innerHTML = typedtext; 
     } else if (typedtext == texttotype) { 
      eraze();       
     } 
     i++;   
    }, 200);    
} 

} 
</script> 

<p id="type-here"></p> 
</body> 
</html> 

BTW, Jedes Stück des Codes individuell arbeitet, Die Eingabe-Typen und der Lösch löschen, ich kann nicht nur erhalten, es dann geben eraze. Jede Richtung oder Vorschlag würde sehr geschätzt werden. Vielen Dank!!!!

+0

derloopkat Ich wollte einen unendlichen Löscheffekt erstellen, deshalb habe ich die Schreibfunktion nicht gestoppt. Nichtsdestotrotz behebt das, was du vorschlägst, das Problem, dass es mir jetzt erlaubt, den Text zu löschen. Irgendeine Idee, wie man dies zu einer ifinite Schreib-Ära macht? Eine while (true) Schleife scheint nicht zu funktionieren, sie hängt meinen Browser. Vielen Dank!!! – rod122

+0

Ich habe die Lösung aktualisiert, um für immer zu schreiben und zu löschen. – derloopkat

Antwort

1

Sie müssen die Funktion stoppen, die Text schreibt, nachdem der gesamte Text bereits geschrieben wurde. Andernfalls wird es über das Ende der Zeichenfolge hinausgehen und der Seite "undefiniert" hinzufügen.

window.onload = function() { 
var texttotype = "this is what i want to type"; 
var typedtext = ""; 

function eraze() { 

    if (typedtext != "") { 
     var eraze = setInterval(function() { 
      typedtext = typedtext.slice(0, typedtext.length - 1); 
      document.getElementById('type-here').innerHTML = typedtext; 
      if (typedtext == "") { //all done 
       clearInterval(eraze); 
       write(); 
       return 
      } 
     }, 200); 
    } 
} 
function write() { 
    if (typedtext == "") { 
     var i = 0; 
     var keepWriting = setInterval(function() { 
      if (typedtext != texttotype) { 
       typedtext += texttotype[i]; 
       document.getElementById('type-here').innerHTML = typedtext; 
      } else if (typedtext == texttotype) { 
       clearInterval(keepWriting); 
       eraze(); 
       return; 
      } 
      i++; 
     }, 200); 
    } 
} 
write(); 
} 
+0

derloopkat Ich wollte einen unendlichen Löscheffekt erzeugen, deshalb habe ich die Schreibfunktion nicht gestoppt. Nichtsdestotrotz behebt das, was du vorschlägst, das Problem, dass es mir jetzt erlaubt, den Text zu löschen. Irgendeine Idee, wie man dies zu einer ifinite Schreib-Ära macht? Eine while (true) Schleife scheint nicht zu funktionieren, sie hängt meinen Browser. Vielen Dank!! – rod122

+0

Ich habe die Lösung aktualisiert. Dies wird für immer schreiben und löschen. Jetzt schreiben Sie die Funktion start von Anfang an, während keepWriting vom letzten geschriebenen Zeichen ausgeht. Das erste, was geschieht, wenn die Seite geladen wird Funktionen sind deklariert und write() wird ausgeführt. – derloopkat

+0

Das funktioniert, danke !!! – rod122

Verwandte Themen