JavaScript Interval Beispiel 3: Ein Textfader zum Überblenden über die Textfarbe

Das nun folgende Beispiel ziegt die Verwendung des JavaScript Intervall anhand eines einfachen Faders. Aufgabe des Faders ist es, den in einem HTML-Element enhaltenen Text schrittweise von der Textfarbe Weiß nach Schwarz überzublenden. Zur Ausgabe wird ein HTML-Element vom Typ Span verwendet. Zu diesem Zweck wird im unteren Script-Abschnitt die Funktion textfader implementiert. Diese Funktion soll die beschriebene Aufgabe erfüllen.

Zu Beginn der Funktion wird mit dem Schlüsselwort var eine Variable definiert. Diese Variable dient der Speicherung der hexadezimalen Ziffern 0 bis F – dies wird benötigt, da die Farbangaben im Stylesheet als hexadezimale Zahlen angegeben werden müssen. Alle Hexadezimalziffern werden in einem normalen String gespeichert. Auf diese Ziffern wird später per Index zugegriffen, wobei die Position im String zugleich die dezimale Entsprechung der Ziffer ist.

Das Element, an dem die Veränderung der Textfarbe vorgenommen werden soll, wird mit der Methode getElementById ermittelt. Der durch diese gelieferte Verweis auf das HTML-Elementobjekt dient dem Zugriff auf die CSS-Informationen des Elements. Nachdem der Startwert für die Textfarbe gestgelegt ist startet die eigentliche Verarbeitung des Intervalls, indem die Window-Methode setInterval aufgerufen wird.

Bei jedem intervallgesteuerten Aufruf der Funktion wird nun der Farbwert von der internen Darstellung als Dezimalzahl (in Variable icol abgelegt) in die hexadezimale Darstellung – abgelegt als Zeichenkette – umgewandelt und col abgelegt. Wiederum mittels Document-Methode getElementById wird die neue Textfarbe dem Style des Anzeigelements zugewiesen, was umgehend zu einer Farbänderung führt. Bei der Zuweisung der Textfarbe wird die Farbe durch gleichmäßige Verteilung auf die drei Farbparameter (rot, grün und blau – ein CSS-Farbwert der Form #RRGGBB) zu einem String zusammengesetzt und der CSS-Eigenschaft color, in welcher die Textfarbe angegeben wird, zugewiesen. Dies geschieht solange, bis die Textfarbe 0 – für Schwarz – ist (wird über das letzte If-Statement in der unten angegebenen Funktion abgefragt).

Am Ende der Funktion wird clearInterval genutzt um der zuvor gestarteten JavaScript Interval zu beenden. Würde dieser Aufruf nicht getätigt, so liefe die Funktion im eingestellten Zyklus weiter bis die angezeigte Seite verlassen oder das Browserfenster geschlossen wird. Zur Integration des Scripts in Ihre Seite lesen Sie bitte den Artikel JavaScript Source Code einbinden.

<span id="textfader" style="width:20em;">Hier kann der Text des Faders stehen!</span><br>
<a href="javascript:textfader ()" title="">Fader starten</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion blendet schrittweise den Inhalt eines HTML-Elementobjekts über
function textfader () {
  // Hexadezimale Ziffern für die Zusammenstellung der Textfarbe
  var h = '0123456789ABCDEF';
  // Wurde die Funktion noch nicht aufgerufen?
  if (typeof icol == 'undefined' ¦¦ icol == -1) {
    // Dann wird die Schriftfarbe des Elements auf seinen
    // Startwert (Weiss) gesetzt.
    document.getElementById ('textfader').style.color = '#FFFFFF';
    // Farbwerte starten bei 255 (FF in Hexadezimal)
    icol = 255;
    col = '';
    // Die Funktion soll im Abstand von 10ms in einem Interval aufgerufen werden
    faderinterval = window.setInterval ('textfader()', 10);
  }
  // Neuen Farbwert setzen...
  col = h[Math.floor (--icol / 16)] + h[icol % 16];
  // und dem Element zuweisen.
  document.getElementById ('textfader').style.color = '#' + col + col + col;
  // Sind wir bei Farbwert 0 (Schwarz) angekommen?
  if (icol == 0) {
    // Dann sind wir am Ziel und setzen den Status der Funktion zurück
    // (auf nicht aufgerufen, damit ein weitere Intervall gestartet werden
    // kann).
    icol = -1;
    // Zum Schluß muss noch der Interval beendet werden, damit die Funktion
    // nicht endlos weiter aufgerufen wird.
    window.clearInterval (faderinterval);
  }
}
// -->
</script>

Hier kann der Text des Faders stehen!
Fader starten

« zurück zu Seite 1 2 weiter zu Seite 4 »