Textticker mit einstellbaren Pausen

Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

JS: Textticker mit einstellbaren Pausen

von Thomas Salvador.

In Text-Ticker hatten wir einen einfachen Text-Ticker implementiert. Hier werden wir in nun so erweitern, dass wir im Text Pausen einstellen können.

Definieren wir auch hier zunächst den Text:

var zeilen = new Array(
  'JavaScript Beispiele...',
  'Text - ein einfacher Text-Ticker...',
  'mit einstellbaren#2 Verzoegerungen...',
  'etwas#1 mehr#2 Code... besserer#2 Effekt...',
  'Have Fun !',
  'Schauen Sie sich doch auch die anderen Beispiele an...'
  );

Wir bemerken Gatter # im Fließtext. Diese werden wir als Markierungen für Pausen verwenden. Der Einfachheit halber lassen wir nur Verzögerungen bis zu 9 Sekunden zu. Daher genügt es, genau eine Zahl nach dem Gatter zu haben. (z.B. #3 für "eine Pause von 3 Sekunden an dieser Stelle"). Die Verallgemeinerung ist naheliegend.

Die Variablen haben die gleiche Bedeutung wie bei einfachen Text-Ticker:

var delayLine=1000;
var delayChar=100;

var x = 0;
var y = 0;
var mx = zeilen[0].length;
var my = zeilen.length-1;

Kommen wir nun zu Funktion tick(). Wir müssen hier etwas anders vorgehen, da wir die Steuerung über die Gatter freilich nicht angezeigt bekommen wollen. Daher nehmen wir ein zusätzliche Variable zeile auf.

var zeile = '';

Treffen wir auf ein Gatter #, so setzen wir nur eine neue Ausführung an. Ansonsten geben erweitern wir die Zeile um das aktuelle Zeichen und schreiben sie in das Textfeld und in die Statuszeile. In beiden Fällen muss geprüft werden, ob wir das Zeilenende erreicht haben. Deshalb lagern wir diesen Code in eine Funktion last() aus. Der Rückgabewert von last() wird nur im letzteren Fall gebraucht.

function last() {
  if (x++ == mx) {
    x = 0;
    zeile = '';
    if (y++ == my)
      y = 0;
    mx = zeilen[y].length;
    return true;
  } else
    return false;
}

Schließlich noch der eigentliche Ticker:

function tick() {

//
// JavaScript - Ticker - Freeware
// (c) 1999 Thomas Salvador, salvador@brauchbar.de, http://www.brauchbar.de
// Nutzung des Scriptes ist erlaubt, solange dieser Urheberrechtshinweis unveraendert
// und vollstaendig erhalten bleibt.
//

  if (zeilen[y].charAt(x) == '#') {
    setTimeout('tick()', 1000*zeilen[y].charAt(x+1));
    x++;
    last();
  } else {
    zeile = zeile+zeilen[y].charAt(x);

    document.ticker.tickfeld.value = zeile+'#';
    window.status = zeile+'#';

    if (last())
      setTimeout('tick()', delayLine);
    else
      setTimeout('tick()', delayChar);
  }
}

Auch hier muss der Ticker einmal von Hand angestoßen werden:

<body OnLoad="tick();">

Beispiel:

Selbstverständlich benötigen wir wie beim einfachen Ticker ein Formular mit Textfeld oder ähnliches, welches den getickten Text darstellt:

  <div align="center"><form name="ticker">
    <input type=text name="tickfeld" size=50 maxlength=50>
  </form></div>

Insgesamt erhalten wir:

Ausgabe auf Ihrem Browser

In der Statuszeile können Sie den Ticker ebenfalls sehen. Natürlich kann der Ticker auch einfch so geändert werden, dass er nur in ein Feld oder in die Statuszeile schreibt. Auch dies kennen wir aus der grundlegenden Version.

JS: Textticker mit einstellbaren Pausen

Verwandte Artikel und Seiten