nicht angemeldet
Probleme mit 'document.setTimeout'
0 
JürgenB
0 
Der Martin
0 0 
Struppi
0
Probleme mit 'document.setTimeout'
Hallo liebe Community =)
Ich habe versucht ein von 'Selfhtml' gegebenes Script umzuändern, leider nicht mit vollem Erfolg.
Funktion soll sein, das beim Drücken eines Links
der gegebene Text des Dokuments per document.fgColor
von #FFFFFF alle Graustufen bis zu #000000 durchläuft.
Das klappt soweit ganz gut. Probleme treten erst auf, wenn man
das 2. Mal auf den Link drückt. In meinem Firefox Browser steht der
Text dann sofort in einem Ekel-Blau, das Script streikt also.
Hat jemand einen Tipp (oder sogar die Lösung) für mein Problem ? =)
Dankeschön im Vorraus!
<html><head><title>Test</title>
<script type="text/javascript">
var X = new Array
("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0");
var x1 = 0, x2 = 0;
var i = 0;
function setColor () {
document.fgColor =
"#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
x2 = x2 + 1;
if (x2 % 16 == 0) {
x2 = 0;
x1 = x1 + 1;
}
i++;
if (i < 256)
window.setTimeout("setColor()", 10);
}
</script></head><body>
<h1> Guten Tag </h1>
<a href="javascript:setColor()">Aufhellen</a>
</body></html>
-
Hallo Marcel,
du musst vor jedem Aufruf die Startwerte von x1, x2 und i neu auf 0 setzen.
Gruß, Jürgen
-
Hallo Marcel,
Ich habe versucht ein von 'Selfhtml' gegebenes Script umzuändern, leider nicht mit vollem Erfolg.
seltsame Dinge treibst du da ...
Funktion soll sein, das beim Drücken eines Links der gegebene Text des Dokuments per document.fgColor von #FFFFFF alle Graustufen bis zu #000000 durchläuft.
Man lässt also eine Variable color von 255 runter bis 0 laufen und setzt in jedem Schleifendurchlauf {body}.style.color auf rgb(color, color, color), wobei {body} eine Referenz auf das body-Element darstellt.
Du machst es dir dagegen unnötig kompliziert.<script type="text/javascript">
var X = new Array
("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0");Interessant - so zählst du rückwärts. Okay, auch 'ne Möglichkeit, aber ziemlich unkonventionell. ;-)
var x1 = 0, x2 = 0;
var i = 0;Warum sowohl i als Zählvariable, als auch x1 und x2? Eins von beiden würde genügen.
function setColor () {
document.fgColor =
"#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
x2 = x2 + 1;Oder kürzer: x2++
if (x2 % 16 == 0) {
x2 = 0;
x1 = x1 + 1;x1++
}
i++;
if (i < 256)
window.setTimeout("setColor()", 10);
}
</script>Das klappt soweit ganz gut. Probleme treten erst auf, wenn man das 2. Mal auf den Link drückt. In meinem Firefox Browser steht der Text dann sofort in einem Ekel-Blau, das Script streikt also.
Nein, es macht genau, was du ihm gesagt hast. Wo setzt du deine Variablen (x1, x2, i) auf ihre Anfangswerte zurück?
Aber wir gesagt: Dein Ansatz ist äußerst unbeholfen und unnötig kompliziert.So long,
Martin--
F: Was sagt die kleine Kerze zur großen Kerze?
A: Ich gehe heute nacht aus!-
Habe mir mal die Mühe gemacht es zu überfliegen, korrigieren und zu Dokumentieren.
Ich weiß, es ist noch nicht 100%ig komplett und auch nicht wirklich gut gelöst. Aber immerhin ist es jetzt klar erkenntlich, was was macht und es macht das, was es machen soll. Egal, wie oft man auf besagten Link klickt.
<script language="JavaScript">// Variablen var X = new Array("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0"); // Hexadezimale Zeichen var x1 = 0, x2 = 0; // Zähler var timeout = null; // Timer-Variable // Schleifenfunktion function setColor () { document.getElementById("dertext").style.color = "#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2]; // Setzen der Farbe x2++; // Hochzählen der Zählervariable x2 if (x2 >= 16) { // Wenn x2 Größer gleich 16 x2 = 0; // x2 auf 0 x1++; // Hochzählen der Zählervariable x1 } if (X[x1] + X[x2] != "00") // Wenn Hexadezimalwert über "00" liegt timeout = setTimeout("setColor()", 10); // Timer auf Timervariable legen } // Ende Schleifenfunktion // Startfunktion function startColor() { clearTimeout(timeout); // Stoppen des ggf. aktuellen Timers. x1=0; // Zurücksetzen der Variablen x2=0; // Zurücksetzen der Variablen timeout = setTimeout("setColor()", 10); // Starten des neuen Timers } // Ende Startfunktion</script> <h1 id="dertext"> Guten Tag </h1> <a href="javascript:startColor()">Aufhellen</a>Ich könnte es jetzt noch Dynamischer gestalten, sodass man bei der Startfunktion ein Objekt angeben kann, welches dann als Ziel für das Aufhellen genutzt wird. Aber das wäre jetzt n bissl zu Viel des Guten.
MFG
Griever-
<script language="JavaScript">Warum du immer noch auf das seit fast 10 Jahren mißbilligte Attribute stehst ist mir ein Rätsel. Es sollte in keiner aktuellen Doku auftauchen, waährend du das Pflichattribut ignorierst.
var X = new Array("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0");
JS kann ohne Probleme mit Hex Zahlen arbeiten. Damit läßt sich der Code noch vereinfachen:
var color; var timeout = null; function setColor2 () { var hex = color.toString(16); document.getElementById("dertext").style.color = "#" + hex + hex + hex; color--; if (color) timeout = setTimeout("setColor2()", 10); } function startColor() { clearTimeout(timeout); color = 255; timeout = setTimeout("setColor2()", 10); }Struppi.
-
Einerseits bin ich froh das ihr mir gezeigt habt welche Alternativen es gibt, andererseits schockiert, da ich ein wenig zurückgeblieben bin in Sachen Fortschritt =p. Danke nochmal für die 2 neuen Möglichkeiten an Struppi und Griever =)
-
-
-
-
Vielen Dank euch beiden für die schnelle Antwort ;)
Ich arbeite die JS-Objektreferenz alphabetisch durch und bin..
nun ja.. beim Objekt 'document'.
Sobald ich alle Alternativen verstehe
werd ich sie mal ausprobieren, Martin =).
Ich versuch gleich mal das Zurücksetzen, klingt einfach =p