PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [JavaScript] Text zeichenweise erscheinen lassen



CaptainAlphabet
09-08-2007, 16:01
Hallo!

In dem nachfolgenden HTML-Code wird beim Laden der Seite die JavaScript-Funktion appear('greeting') aufgerufen. Der angegebene Parameter "greeting" bezeichnet die ID einer Überschrift ersten Grades.

Die Funktion speichert den Text dieses H1-Elements in der Variable "Text" und entfernt anschließend den Text innerhalb des H1-Elements.

Nun wird eine for-Schleife, beginnend bei 0, so oft durchlaufen, bis die Zählervariable den Wert der Textlänge erreicht hat.

Bei jedem Schleifendurchlauf nimmt die Variable "Letter" ein Zeichen des Textes von der Position entsprechend der Zählervariable an und soll mit einer Verzögerung von 100 ms wieder in das H1-Element geschrieben werden.

Die Funktion an sich funktioniert, solange man die Methode window.setTimeout() weglässt. Natürlich werden dann alle Zeichen unmittelbar in das H1-Element geschrieben. Verwende ich aber den Timeout, wird gar kein Text in das H1-Element geschrieben.

Meine Frage lautet also: Was mache ich falsch? Ich hoffe, ihr könnt mir da weiterhelfen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text zeichenweise erscheinen lassen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<script type="text/javascript">
//<![CDATA[
function appear(Id)
{
var Text = document.getElementById(Id).firstChild.data;
document.getElementById(Id).firstChild.deleteData( 0, Text.length);

for (i = 0; i < Text.length; i++)
{
var Letter = Text.substring(i, i+1);
window.setTimeout('document.getElementById(' + Id + ').firstChild.appendData(' + Letter + ')', 100);
}
}
//]]>
</script>
</head>
<body onload="appear('greeting');">
<h1 id="greeting">Willkommen aus dieser Website!</h1>
<p>Hier steht der Seiteninhalt...</p>
</body>
</html>

Gruß

CaptainAlphabet

jan61
09-08-2007, 23:13
Moin,

so wie ich http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout verstanden habe, erwartet setTimeout() eine Java-Script-Funktion, keine Methode eines DOM-Objekts.

Versuchs mal so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text zeichenweise erscheinen lassen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<script type="text/javascript">
//<![CDATA[
function appear(Id, Text, idx)
{
if (idx == 0) {
Text = document.getElementById(Id).firstChild.data;
document.getElementById(Id).firstChild.deleteData( 0, Text.length);
}

if (idx < Text.length)
{
var Letter = Text.substring(idx, idx+1);
document.getElementById(Id).firstChild.appendData( Letter);
idx ++;
window.setTimeout("appear('" + Id + "','" + Text + "'," + idx + ")", 100);
}
}
//]]>
</script>
</head>
<body onload="appear('greeting', '', 0);">
<h1 id="greeting">Willkommen auf dieser Website!</h1>
<p>Hier steht der Seiteninhalt...</p>
</body>
</html>Jan

BlueJay
10-08-2007, 15:36
dem setTimeout sollte es egal sein, ob Javascript oder das DOM die Methode bereitstellt.

Aber das mit der Loop sollte anders ablaufen, als sich Captain Analphabet das vorgestellt hat. Mit der for-Schleife wird er kein Glück haben, er startet gleichzeitig etlich Timeouts, und die schlagen dann natürlich alle zur gleichen Zeit zu.

Besser wäre eine Art Konstrukt, das rekursiv nach Ausgabe eines Buchstabens einen neuen Timeout startet. Da die meisten Browser Bildschirmausgaben sammeln, bevor sie zuschlagen, müsste er sogar für jeden Durchlauf der Ausgabe die Methode einzeln starten. Dann sollten die Buchstaben wie gewünscht "dröppeln".

so long,
BlueJay

jan61
10-08-2007, 21:37
...Besser wäre eine Art Konstrukt, das rekursiv nach Ausgabe eines Buchstabens einen neuen Timeout startet. Da die meisten Browser Bildschirmausgaben sammeln, bevor sie zuschlagen, müsste er sogar für jeden Durchlauf der Ausgabe die Methode einzeln starten. Dann sollten die Buchstaben wie gewünscht "dröppeln".

Genau das mache ich in meinem Beispiel ;-)

Jan

BlueJay
10-08-2007, 21:50
Genau das mache ich in meinem Beispiel ;-)
Jan

Deshalb hatte ich mich auf das Warum beschränkt.;)

CaptainAlphabet
12-08-2007, 12:29
Das ist also die Lösung des Ganzen.

Ich danke euch für eure Hilfe! :)