Schreibmaschineneffekt :(

A

Acriss

Gesperrt
Tag,
habe mir bei selfhtml.org den Artikel über setInterval durchgelesen,
und folgendes geschrieben
HTML: 
<script type="text/javascript">


var aktiv = window.setInterval("Typing()", 1);

var i = 0, text = 1;
function Typing ()
	{
  	if (text == 1) {
	document.write ("H");
	text = 2;
	}
else if  (text == 2) {
	document.write ("A");
	text = 3;
	}
else if  (text == 3) {
	document.write ("L");
	text = 4;
	}
else if  (text == 4) {
	document.write ("L");
	text = 5;
	}
else if  (text == 5) {
	document.write ("O");
	text = 6;
	}
else if  (text == 6) {
	document.write ("!");
	text = 7;
	}


	i = i + 1;
	if (i >= 6)
    	window.clearInterval(aktiv);
	}
</script>
Es soll HALLO! schreiben, mit einem Schreibmaschineneffekt.
Doch leider Schreibt es nur H :(
 
Hi,

mit document.write schreibst Du das Dokument neu, dh. die erste Ausführung wird noch erledigt ("H" ausgegeben).
Anschliessend hast Du nur noch ein Dokument, in dem "H" steht, der Rest ist "gelöscht".

Besser Du erstellst ein HTML-Element und hängst an dessen Ihnalt mit der Eigenschaft innerHTML jeweils den neuen
Buchstaben an. Die Funktion Typing sollte dann jedoch erst aufgerufen werden, nachdem das Dokument geladen
wurde (onload-Event), da sonst das HTML-Element noch nicht existiert.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var aktiv = null;
var i = 0, text = 1;

window.onload = function(){
  aktiv = window.setInterval("Typing()", 500);
}

function Typing ()
	{
  	if (text == 1) {
	document.getElementById("outID").innerHTML += ("H");
	text = 2;
	}
else if  (text == 2) {
	document.getElementById("outID").innerHTML += ("A");
	text = 3;
	}
else if  (text == 3) {
	document.getElementById("outID").innerHTML += ("L");
	text = 4;
	}
else if  (text == 4) {
	document.getElementById("outID").innerHTML += ("L");
	text = 5;
	}
else if  (text == 5) {
	document.getElementById("outID").innerHTML += ("O");
	text = 6;
	}
else if  (text == 6) {
	document.getElementById("outID").innerHTML += ("!");
	text = 7;
	}

	i = i + 1;
	if (i >= 6)
    	window.clearInterval(aktiv);
	}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
</body>
</html>
Die Funktion lässt sich aber auch noch komprimierter schreiben:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "HALLO!";
var aktiv = null;
var i = 0, text = 1;

function Typing (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= 6)
    window.clearInterval(aktiv);
}

window.onload = function(){
  aktiv = window.setInterval("Typing()", 500);
}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Die write()-Methode funktioniert nur richtig, bevor die Seite vollständig geladen ist. Benutzte statt dessen ein <div>-Tag mit einer id, den du über getElementById() ansprichst und dessen innerHTML du veränderst.

Edit:
Fhtagn, da war jemand schneller als ich...
 
Zuletzt bearbeitet:
Ok danke,
auch für die 2te Version, die Tipparbeit spart :) sogar erheblich :D
Btw:
damit der Effekt "gut" rüberkommt sollte man die Geschwindigkeit auf 50 Microsecunden stellen ;)
 
Kleine Anmerkung am Rande als alter Physiker: Eine Mikrosekunde ist der millionste Teil einer Sekunde, also unglaublich wenig. Da würde der Text schon sofort dastehen. Was du meinst ist Millisekunden, der tausendeste Teil einer Sekunde.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück