SELFHTML: JavaScript / Sprachelemente / Aufenthaltsdauer auf Web-Seite anzeigen

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele
	Aufenthaltsdauer auf Web-Seite anzeigen
	Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

Hinweise zu diesem Beispiel

Das Beispiel auf dieser Seite zeigt in einem kleinen Feld laufend an, wie viele Minuten und Sekunden seit dem Aufruf der Seite verstrichen sind. Gedacht ist die Anzeige des Feldes vor allem für HTML-Dateien, die innerhalb eines Frame-Fensters ständig angezeigt bleiben, etwa in einem Frame-Fenster mit einem Logo oder mit Verweisen. In solchen Fällen läuft die Uhr während der gesamten Besuchszeit, die der Anwender auf den Seiten verbringt. Man mag das als eine überflüssige Spielerei abtun, aber angenommen, es wird etwas angezeigt, wobei der Anwender schnell die teure Online-Zeit vergisst, etwa ein Spiel oder ein Chat-Fenster. Dann kann eine solche kleine "Erinnerung" in Form einer laufenden Zeituhr durchaus nützlich sein.

Quelltext mit Erläuterungen

Das Beispiel zeigt die HTML-Datei, in der das JavaScript und die Zeitanzeige stehen. Im Anzeigebeispiel ist diese Datei in ein Frameset eingebunden.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Aufenthaltsdauer auf Web-Seite anzeigen</title>
<script type="text/javascript">
var Jetzt = new Date();
var Start = Jetzt.getTime();

function ZeitAnzeigen () {
  var absSekunden = Math.round(ZeitBerechnen());
  var relSekunden = absSekunden % 60;
  var absMinuten = Math.abs(Math.round((absSekunden - 30) / 60));
  var anzSekunden = "" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
  var anzMinuten = "" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
  window.document.Anzeige.Zeit.value = anzMinuten + ":" + anzSekunden;
  window.setTimeout("ZeitAnzeigen()", 1000);
}

function ZeitBerechnen () {
  var Immernoch = new Date();
  return ((Immernoch.getTime() - Start) / 1000);
}
</script>
</head>
<body bgcolor="#EEEEEE" onload="window.setTimeout('ZeitAnzeigen()', 1000)">

<form name="Anzeige" action="">
<input type="text" size="7" name="Zeit" value="00:00">
</form>

<p>viel Spa&szlig; im rechten Frame-Fenster!</p>

</body>
</html>

Erläuterung:

Startzeit ermitteln:

Beim Einlesen der Datei wird zunächst der aktuelle Zeitpunkt ermittelt. Dieser Zeitpunkt dient als Startzeit der Anzeige. Mit Jetzt = new Date() wird ein neues Datumsobjekt mit dem aktuellen Zeitpunkt in der Variablen Jetzt gespeichert. Mit Jetzt.getTime wird eine absolute Zahl in Millisekunden ermittelt, die in der Variablen Start gespeichert wird.

Funktion zur Zeitanzeige erstmals aufrufen:

Im einleitenden <body>-Tag steht im Beispiel der erste Aufruf der Funktion ZeitAnzeigen(), die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert. Der erste Aufruf erfolgt nach einer Sekunde. Dazu wird der Funktionsaufruf in die setTimeout()-Methode mit einer Verzögerungszeit von 1000 Millisekunden (1 Sekunde) eingebettet.
Im Dateikörper steht dann ein Formular, das nur aus einem einzigen kleinen Eingabefeld besteht. Dieses Eingabefeld wird als Ausgabefeld für die Zeitanzeige zweckentfremdet. Es wird mit dem Wert 00:00 vorbelegt, damit auch in der ersten Sekunde schon etwas in dem Feld steht.

Zeit anzeigen und Anzeige laufend aktualisieren:

Die Funktion ZeitAnzeigen(), die für die laufende Zeitanzeige verantwortlich ist, ruft zunächst die Unterfunktion ZeitBerechnen() auf. Diese Funktion erzeugt bei jedem Aufruf ein neues Datumsobjekt mit dem aktuellen Zeitpunkt. Das Ergebnis wird in der Variablen Immernoch gespeichert. Zurückgegeben wird jedoch nicht der aktuelle Zeitpunkt, sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt, der beim Einlesen der Datei ermittelt wurde. Der Rückgabewert erfolgt in Sekunden. Da beim Datumsobjekt intern in Millisekunden gerechnet wird, wird der Wert durch 1000 geteilt, um Sekunden zu erhalten. Dabei können jedoch Bruchzahlen zustande kommen. Um eine glatte Sekundenzahl zu erhalten, wendet die aufrufende Funktion ZeitAnzeigen() die Methode Math.round() an.

Die absolute Anzahl der vergangenen Sekunden steht dann in der Variablen absSekunden. Von dem darin gespeicherten Wert werden alle folgenden Werte abgeleitet. Mit Math.round((absSekunden-30)/60) wird ermittelt, wie viele Minuten die Sekundenzahl bereits impliziert. Wenn die Sekundenzahl beispielsweise 200 lautet, sind darin 3 Minuten (180 Sekunden) enthalten. Dieser Wert wird in der Variablen absMinuten gespeichert. Da Opera 5.12 in den ersten 30 Sekunden als Ergebnis der Operation -0 zurückliefert, wird zur Unterdrückung des Minuszeichens mit Math.abs der absolute Betrag des Wertes ermittelt. Der Restwert an Sekunden, also bei 200 und 180 etwa der Wert 20, wird mit der Modulo-Division absSekunden % 60 in der Variablen relSekunden gespeichert. Im Falle von 200 steht dann also in absMinuten der Wert 3 und in relSekunden der Wert 20.

Um die Anzeige der Minuten und Sekunden für die Ausgabe ordentlich zu formatieren, werden Zeichenketten erzeugt, die in den Variablen anzSekunden und anzMinuten gespeichert werden. Wenn eine Minuten- oder Sekundenzahl einstellig ist, bekommt sie eine 0 vorangestellt.

Mit der Zuweisung an window.document.Anzeige.Zeit.value wird die ermittelte und formatierte Zeit anschließend in das Formularfeld geschrieben, das zur Zeitanzeige dient. Damit die Zeitanzeige weiterläuft, ruft sich die Funktion ZeitAnzeigen() am Ende mit einer Verzögerungszeit von 1000 Millisekunden, also einer Sekunde, selbst wieder auf. Dadurch wird der gesamte Vorgang wiederholt.


	Verweisliste als Auswahlliste
	Dynamische grafische Buttons

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele