Textticker mit einstellbaren Pausen

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...'
  );

Sie 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 Ziffer 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;
  }
}

Fehlt noch der eigentliche Ticker:

function tick() {

//
// JavaScript - Ticker - Freeware
// (c) 1999 Thomas Salvador, brauchbar.de
//

  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:

In der Statuszeile können Sie den Ticker ebenfalls sehen, wenn Ihre Browser das unterstützt.

Natürlich kann der Ticker auch einfach so geändert werden, dass er nur in ein Feld oder in die Statuszeile schreibt.