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

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


verwandte Artikel und Seiten

JS: Textticker

von Thomas Salvador.

In diesem Artikel realisieren wir einen grundlegenden Textticker. Wir brauchen dazu ein Feld von Textzeilen und eine Funktion, die die Buchstaben der Reihe nach ausgibt und jeweils kurz verzögert.

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, salvador@brauchbar.de, http://www.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:

<body OnLoad="tick();">

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

Hinweis: Das vollständige Script kopieren Sie am besten direkt aus der Quelltextanzeige der Datei.

Beispiel:

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

liefert

Ausgabe auf Ihrem Browser

In der Statuszeile können Sie den Ticker ebenfalls sehen.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 12. Ausgabe.


Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/54.html .