nicht angemeldet
Gernot Back
Gernot Back
Gernot Back
at
MudGuard
Gernot Back
MudGuard
Gernot Back
at
Gernot Back
at
Ich habe mir in den Kopf gesetzt ein Script zu schreiben, das beim Laden der Seite einen Text, z.B. "Hallo" ausgibt.
Und zwar nicht das ganze "Hallo" auf einmal, sondern die einzellnen Buchstaben in einem gewissen Zeitabstand hintereinander.
wenn ich nun schreibe:
------
hallo = new Array("h","a","l","l","o");
lange = hallo.length;
for(i=0;i<lange;i++)
{
document.write(hallo[i]);
}
------
wird das hallo natürlich gleich das kommplette Hallo ausgegeben.
Ich habe mir den Kopf drüber zerbrochen, wie das funktionieren soll und komme einfach nicht weiter.
Gruß
Nitram
Hallo Nitram-X,
die Schleife ist leider zu schnell, als das man es sehen könnte. setInterval ist das, was Du benötigst. Hiermit musst Du eine Funktion oder ein Laufindex immer wieder anschupsen, die dann den nächsten Buchstaben aus dem Array holt.
Mit freundlichem Gruß
Micha
Hallo Micha, hallo Nitram-X,
die Schleife ist leider zu schnell, als das man es sehen könnte. setInterval ist das, was Du benötigst. Hiermit musst Du eine Funktion oder ein Laufindex immer wieder anschupsen, die dann den nächsten Buchstaben aus dem Array holt.
Stichwort setTimeout oder setInterval wie schon Mathias sagte.
Zu ergänzen wäre noch: Das Array kann man der Einfachheit halber mit der Methode split('') aus einer einzigen Zeichenkette erstellen, um sich die Tipparbeit mit den vielen Anführungszeichen und Kommas zu ersparen.
Das hat dann auch den Vorteil, das man so das InnerHTML eines bestehenden Elements in ein Array zwischenspeichern kann, das innerHTML dieses Elements anschließend mit einer leeren Zeichenkette überschreiben und danach wieder Buchstaben für Buchstaben aus dem Array zurückschreiben kann. Bei deaktiviertem Javascript ist der Text dann wenigstens auch da, wenn auch unverändert und von vornherein in Gänze.
Der Aufruf der Lösch- und Neuschreibfunktion sollte bei diesem Verfahren allerdings in einem Script-Block im Quellcode direkt hinter dem betreffenden Element erfolgen, damit bei länger ladenden Seiten nicht der Text zuerst erscheint, dann onload wieder verschwindet und schließlich häppchenweise wieder zurückgeschrieben wird.
Gruß Gernot
Hallo Gernot Back,
Stichwort setTimeout oder setInterval wie schon Mathias sagte.
Wirkt es, wenn ich es auch nenne, anders?
Zu ergänzen wäre noch: Das Array kann man der Einfachheit halber mit der Methode split('') aus einer einzigen Zeichenkette erstellen,
Uhhhh, das ist afaik keinm guter Tipp. Besser wäre hier ein charAt.
Mit freundlichem Gruß
Micha
Hallo Micha,
Stichwort setTimeout oder setInterval wie schon Mathias sagte.
Wirkt es, wenn ich es auch nenne, anders?
Nein, das habe ich glatt überlesen, wobei eine sich selbst über setTimeout immer wieder aufrufende Funktion aufgrund der für meinen Geschmack leichter handhabbaren Abbruchbedingung mit clearTimeout zu bevorzugen ist.
Zu ergänzen wäre noch: Das Array kann man der Einfachheit halber mit der Methode split('') aus einer einzigen Zeichenkette erstellen,
Uhhhh, das ist afaik keinm guter Tipp. Besser wäre hier ein charAt.
Weshalb meinst du das? Ich wüsste jetzt nicht so ohne weiteres, was für den Rechner aufwändiger wäre, die erhöhte Zahl an Speicherplätzen bei einem Array zu verwalten und zu reservieren oder der ständige Aufruf der Methode charAt() in jedem Intervall.
Ich denke heutige Rechner kommen wohl mit beidem sehr gut zurecht. Eventuell könnte man ja auch aus dem mit split('') erstellten Array in jedem Intervall mit der Methode shift() das jeweils erste Element nach seinem Zurückschreiben löschen und als Speicherplatz wieder freigeben. Dann erübrigt sich sogar die Laufvariable, aber wer weiß, was das ständige neue Durchnummerieren des Arrays über shift() in jedem Intervall für einen Aufwand für den Rechner bedeutet?
Solche Performanzerwägungen mit Rücksicht auf das Elektronenhirn würde ich aber erst bei extrem langen oder extrem schnell tickernden Texten anstellen und ansonsten einem fürs Programmiererhirn möglichst leicht nachzuvollziehenden Javascriptcode den Vorzug geben.
Da gebe ich dir Recht: Ein Code mit "charAt()" ist für den Menschen sprechender.
Gruß Gernot
Hallo Nitram-X.
Ich habe mir in den Kopf gesetzt ein Script zu schreiben, das beim Laden der Seite einen Text, z.B. "Hallo" ausgibt.
Das „beim Laden“ ist das erste Stichwort. Setze dein Script wie folgt um:
window.onload = function() {
// Der Code
};
Dort erzeugst du nun entweder <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=ein neues Element> und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängst es in das Dokument ein, oder http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=greifst auf ein bestehendes zu.
Der Einfachheit halber kannst du nun mit Hilfe von http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=setInterval dessen http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML nach und nach ergänzen.
Einen schönen Samstag noch.
Gruß, Mathias
Hallo Nitram-X.
Ich habe mir in den Kopf gesetzt ein Script zu schreiben, das beim Laden der Seite einen Text, z.B. "Hallo" ausgibt.
Das „beim Laden“ ist das erste Stichwort. Setze dein Script wie folgt um:
window.onload = function() {
// Der Code
};
>
> Dort erzeugst du nun entweder <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=ein neues Element> und <http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängst> es in das Dokument ein, oder <http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=greifst> auf ein bestehendes zu.
>
> Der Einfachheit halber kannst du nun mit Hilfe von <http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=setInterval> dessen <http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML> nach und nach ergänzen.
>
>
> Einen schönen Samstag noch.
>
> Gruß, Mathias
>
Hat wunderbar funktioniert! :)
<script type="text/javascript">
hallo = new Array("h","a","l","l","o");
alange = hallo.length;
aktiv = window.setInterval('schleife()',50);
var i = 0;
function schleife()
{
mySpan = document.createElement("span");
myText = document.createTextNode(hallo[i]);
mySpan.appendChild(myText);
mybereich = document.getElementById("bereich");
mybereich.appendChild(mySpan);
i = i + 1;
if(i==alange)window.clearInterval(aktiv);
}
</script>
</head>
<body>
<div id="bereich"></div>
</body>
Danke Nochmal
Werde das noch etwas verfeinern
Hallo Nitram,
Dort erzeugst du nun entweder <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=ein neues Element> und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängst es in das Dokument ein, oder http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=greifst auf ein bestehendes zu.
Hat wunderbar funktioniert! :)
> <script type="text/javascript">
> hallo = new Array("h","a","l","l","o");
> alange = hallo.length;
> aktiv = window.setInterval('schleife()',50);
> var i = 0;
> function schleife()
> {
> mySpan = document.createElement("span");
> myText = document.createTextNode(hallo[i]);
> mySpan.appendChild(myText);
> mybereich = document.getElementById("bereich");
> mybereich.appendChild(mySpan);
>
> i = i + 1;
> if(i==alange)window.clearInterval(aktiv);
> }
> </script>
Da finde ich Mathias' zweiten Vorschlag, auf ein bestehendes Element zuzugreifen und dessen innerHTML zu verändern besser. Warum mehr Elemente erzeugen als nötig?
Werde das noch etwas verfeinern
Wie wär es so?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Telex</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
[code lang=css]
.telex {
font:bold 1.5em "Courier New", Courier, monospace;
}
</style>
<script type="text/javascript">
function telex () {
var myPs = document.getElementsByTagName('P');
if(myPs[myPs.length-1].className == 'telex') {
var myTelex = myPs[myPs.length-1];
myTelex.copy = myTelex.innerHTML;
myTelex.innerHTML = '';
myTelex.typer = function () {
with(myTelex)
if(copy) {
innerHTML += copy.slice(0, 1);
copy = copy.slice(1, copy.length);
} else window.clearInterval(typing);
}
myTelex.typing = window.setInterval(myTelex.typer, 40);
}
}
</script>
</head>
<body>
<p class="telex">Das ist ein Text, der nur bei aktiviertem Javascript
wie auf einem guten alten Fernschreiber Buchstabe für Buchstabe
erscheint und ansonsten von vornherein dasteht.</p>
<script type="text/javascript">telex();</script>
<p>Hier steht ein ganz anderer Text.</p>
<p class="telex">Hier kommt nochmal ein anderes Geticker.</p>
<script type="text/javascript">telex();</script>
</body>
</html>[/code]
Gruß Gernot
Wie wär es so?
function telex () {
var myPs = document.getElementsByTagName('P');
if(myPs[myPs.length-1].className == 'telex') {
var myTelex = myPs[myPs.length-1];
myTelex.copy = myTelex.innerHTML;
myTelex.innerHTML = '';
myTelex.typer = function () {
with(myTelex)
if(copy) {
innerHTML += copy.slice(0, 1);
copy = copy.slice(1, copy.length);
} else window.clearInterval(typing);
}
myTelex.typing = window.setInterval(myTelex.typer, 40);
}
}[/code]
</script>
</head>
<body>
<p class="telex">Das ist ein Text, der nur bei aktiviertem Javascript
wie auf einem guten alten Fernschreiber Buchstabe für Buchstabe
erscheint und ansonsten von vornherein dasteht.</p>
<script type="text/javascript">telex();</script>
<p>Hier steht ein ganz anderer Text.</p>
<p class="telex">Hier kommt nochmal ein anderes Geticker.</p>
<script type="text/javascript">telex();</script>
</body>
</html>[/code]Gruß Gernot
Das rockt!
Leider bin ich noch nicht fut genug, um den Code ganz nachzuvollziehen. Werde mich deshalb erst einmal damit beschäftigen.
Würde es mir erleichtern, wenn du mir den Code etwas erklärst, wenn es nichts ausmacht.
Hallo NItram,
Das rockt!
Leider bin ich noch nicht fut genug, um den Code ganz nachzuvollziehen. Werde mich deshalb erst einmal damit beschäftigen.
Würde es mir erleichtern, wenn du mir den Code etwas erklärst, wenn es nichts ausmacht.
Ja, ich bin diesbezüglich in letzter Zeit etwas faul. Also hole ich es jetzt mal nach:
Die Funkktion telex() wird nicht onload der Seite aufgerufen, sondern jeweils in einem Script-Block nach dem jeweiligen Ticker-Element. (Das ist bei vorliegender Codierung auf P-Elemente mit dem Klassennamen "telex" eschränkt.) Das hat den Vorteil, dass bei längeren Seiten und langsamer Übertragungsrate der Text nicht zuerst sichtbar wird, während der rest der Seite noch lädt und dann erst verschwindet um dann wieder hervorzutickern.
> > function telex () {
> > var myPs = document.getElementsByTagName('P');
> > if(myPs[myPs.length-1].className == 'telex') {
> > var myTelex = myPs[myPs.length-1];
// hier nur wird das jeweils letzte P-Element der Klasse
// "telex" während des Ladevorgangs der Seite angesprochen.
> > myTelex.copy = myTelex.innerHTML;
// Der Text (innerHTML), der innerhalb des P-Elements steht
// (es darf sich dabei wirklich nur um einen reinen String
// handeln) wird in eine neu geschaffene Eigenschaft des
// P-Elements kopiert, der ich den Namen "copy" gebe.
> > myTelex.innerHTML = '';
// Der in "copy" gespeicherte String kann nun aus dem Element
// selbst herausgelöscht werden, er ist ja in "copy" gemerkt.
// Das jeweilige P-Element bekommt nun eine Methode verpasst,
// mit der es seinen jeweiligen Text auch wieder Buchstabe
// für Buchstabe in sein innerHTML zurücküberführen kann:
> > myTelex.typer = function () {
> > with(myTelex)
// myTelex ist eine Referenz auf den Eigentümer der
// Methode selbst, also das jeweils letzte P-Element
// während des Ladevorgangs.
> > if(copy) {
// falls sich noch ein String in der jeweiligen
// Eigenschaft "copy" des P-Elements befindet
> > innerHTML += copy.slice(0, 1);
// wird daraus das erste Zeichen herausgeschnitten
// (das kann auch ein Leerzeichen sein) und an das
// innerHTML des jeweiligen P-Elements angehängt.
// Am Anfang besteht dieses ja aus einer leeren
// Zeichenkette, da das ursprüngliche innerHTML
// gelöscht wurde.
> > copy = copy.slice(1, copy.length);
// Das jeweils erste Zeichen wird aus "copy" gelöscht.
// Dadurch wird das nächste Zeichen zum neuen ersten.
> > } else // wenn kein Zeichen in copy mehr vorhanden ist
> > window.clearInterval(typing);
// sollte das Intervall beendet werden,
// sonst wird unnötig Rechnerleistung blockiert.
> > }
// bis hier wurde die Methode nur definiert
> > myTelex.typing = window.setInterval(myTelex.typer, 40);
// hier wird sie mit einem Intervall von 40 Millisekunden
// immer wieder aufgerufen. Über die Referenz in der
// Eigenschaft "typing" des jeweiligen P-Elements stoppt
// das Intervall, wenn die Kopie komplett entleert und
// die jeweilige Zeichenkette an den Ursprungsort
// zurückgeschrieben ist.
> > }
> > }
</script>
Gruß Gernot
Hallo.
Die Funkktion telex() wird nicht onload der Seite aufgerufen, sondern jeweils in einem Script-Block nach dem jeweiligen Ticker-Element. (Das ist bei vorliegender Codierung auf P-Elemente mit dem Klassennamen "telex" eschränkt.) Das hat den Vorteil, dass bei längeren Seiten und langsamer Übertragungsrate der Text nicht zuerst sichtbar wird, während der rest der Seite noch lädt und dann erst verschwindet um dann wieder hervorzutickern.
Wenn einen das <script> mitten im Quelltext stört, kann man natürlich auch das Skript bereits ausführen, sobald das DOM der Seite übertragen worden ist.
MfG, at
danke euch beiden!
Bin zwar schon ziemilch müde, werde es aber gleich mal ausprbieren :)
Hi,
sondern die einzellnen Buchstaben
Amöben und Pantoffeltierchen können schreiben? ;-)
cu,
Andreas
Hallo Andreas,
sondern die einzellnen Buchstaben
Amöben und Pantoffeltierchen können schreiben? ;-)
Ja wusstest du denn nicht: Nonnen und Mönche waren hierzulande sogar die ersten Schriftkundigen und noch heute vermehren sie sich durch die Zellnteilung.
Gruß Gernot
Hi,
Ja wusstest du denn nicht: Nonnen und Mönche waren hierzulande sogar die ersten Schriftkundigen und noch heute vermehren sie sich durch die Zellnteilung.
Daher kommt ja auch für gewisse Dachziegel die Bezeichnung Mönch und Nonne - jede Nonne liegt unter zwei Mönchen, jeder Mönch liegt auf zwei Nonnen ...
cu,
Andreas
Hallo Andreas,
Daher kommt ja auch für gewisse Dachziegel die Bezeichnung Mönch und Nonne - jede Nonne liegt unter zwei Mönchen, jeder Mönch liegt auf zwei Nonnen ...
Was denn, Nonne auf zwei Mönchen, Mönch unter zwei Nonnen, Nonne unter zwei Nonnen, Mönch auf zwei Mönchen, das geht alles nicht?
Ich bin etwas enttäuscht, naja aber immerhin kann man da auch http://de.wikipedia.org/wiki/Biberschwanz@Biberschwanz auf Biberschwanz legen, da bleiben die Nonnen dann ganz in der Röhre.
Irgendwie bin ich auch erleichtert, dass auch das einfache Handwerk seine Sexismen hat. Ich wähnte die feine Kunst der Linguistik mit ihrer Bezeichnung Genus verbi für "Aktiv" und "Passiv" schon ganz isoliert.
Gruß Gernot
Hallo.
Irgendwie bin ich auch erleichtert, dass auch das einfache Handwerk seine Sexismen hat. Ich wähnte die feine Kunst der Linguistik mit ihrer Bezeichnung Genus verbi für "Aktiv" und "Passiv" schon ganz isoliert.
Apropos "isoliert": Bei Steckverbindungen in der Elektrotechnik werden ja auch männliche und weibliche Stecker und Buchsen unterschieden.
MfG, at
Hallo at,
Apropos "isoliert": Bei Steckverbindungen in der Elektrotechnik werden ja auch männliche und weibliche Stecker und Buchsen unterschieden.
Ein weiblicher Stecker und eine männliche Buchse, das hat ja was! Vielleicht hätte ich Elektrotechnik studieren sollen! Dann wäre aus mir noch eine ordentliche Lüsternklemme geworden.
Gruß Gernot
Hallo.
Vielleicht hätte ich Elektrotechnik studieren sollen! Dann wäre aus mir noch eine ordentliche Lüsternklemme geworden.
Löten hast du ja immerhin noch so gelernt.
MfG, at