Textticker

Als Ausgabeziele eignen sich besonders gut ein Textfeld oder die Statuszeile des Browsers.

Definieren wir zunächst den Text:

var zeilen = new Array(
  'JavaScript Beispiele...',
  'Text - ein einfacher Text-Ticker...',
  'mit wenig Code ein netter Effekt...',
  'Have Fun!',
  'Schauen Sie sich doch auch die anderen JavaScript-Artikel an...'
);

Um das Script leicht wartbar zu machen, führen wir zwei Variablen zur Konfiguration ein:

var delayLine=1000;
var delayChar=100;

Dabei ist delayLine die Verzögerung zwischen den Zeilen, d.h. der Wert in Millisekunden, den die voll dargestellte Zeile gezeigt werden soll, bevor die nächste Zeile getickt wird. Hier beträgt die Verzögerung also eine Sekunde.

delayChar ist entsprechend die Verzögerung zwischen den einzelnen Buchstaben einer Zeile, ebenfalls in Millisekunden.

Schließlich implementieren wir den Ticker.

In der gebrachten Version schreibt der Ticker in ein Feld "textfeld" eines Formulares "ticker" und in die Statuszeile des Browsers "window.status".

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

function tick()
{

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

  document.ticker.tickfeld.value =
  zeilen[y].substring(0,x)+'#';
  window.status = zeilen[y].substring(0,x)+'#';
  if (x++ == mx) {
    x = 0;
    if (y++ == my) {
      y = 0;
    }
    mx = zeilen[y].length;
    setTimeout('tick()', delayLine);
  } else {
    setTimeout('tick()', delayChar);
  }
}

Das Gatter # dient dabei nur als eine Art Cursor, kann freilich angepasst oder weggelassen werden. Soll der Ticker nur in die Statuszeile schreiben, so löschen Sie bitte die Zeile

document.ticker.tickfeld.value = zeilen[y].substring(0,x)+"#";

Entsprechend können Sie die Zeile

window.status = zeilen[y].substring(0,x)+"#";

löschen, wenn der Ticker nur in das Textfeld schreiben soll.

Die Variablen x bzw. y halten die aktuelle Position Zeichen in Zeile bzw. Nummer der Zeile, mx bzw. my jeweils die maximalen Werte Anzahl Zeichen in aktueller Zeile bzw. Nummer maximaler Zeile.

tick selbst schreibt entsprechend diesen Werten die ersten (x+1) Zeichen derZeile y in die Ziele und passt dann die Werte an.

Dabei wird die Position innerhalb der Zeile erhöht. Ist das Zeilenende noch nicht erreicht, so wird die nächste Ausführung von tick in delayChar Millisekunden angesetzt.

Wurde das Zeileende erreicht, so wird die Position zurückgesetzt und die nächste Zeile gewählt. Wurden bereits alle Zeilen ausgegeben, so wird wieder von vorn begonnen.

Die nächste Ausführung von tick() wird hier in delayLine Millisekunden angesetzt.

Der Ticker selbst muss einmal von Hand angestoßen werden. Hierfür eignet sich der onload-Handler von body:

&lt;<a href="/html-4-referenz/tag-body">body</a> OnLoad=&quot;tick();&quot;&gt;

Das Script gehört in den Kopfbereich der HTML-Datei.

<script type="text/javascript"><!--
<!--

var zeilen = new Array(
  'JavaScript Beispiele...',
  'Text - ein einfacher Text-Ticker...',
  'mit wenig Code ein netter Effekt...',
  'Have Fun!',
  'Schauen Sie sich doch auch die anderen JavaScript-Beispiele an...'
);

var delayLine=1000;
var delayChar=100;

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

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

  document.ticker.tickfeld.value =
  zeilen[y].substring(0,x)+'#';
  window.status = zeilen[y].substring(0,x)+'#';
  if (x++ == mx) {
    x = 0;
    if (y++ == my) {
      y = 0;
    }
    mx = zeilen[y].length;
    setTimeout('tick()', delayLine);
  } else {
    setTimeout('tick()', delayChar);
  }
}

Beispiel

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

liefert