1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Sprachelemente / Aufenthaltsdauer auf Web-Seite anzeigen</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript in einem kleinen Feld Minuten und Sekunden anzeigen knnen, die seit dem Aufruf der Seite verstrichen sind.">
<meta name="keywords" content="SELFHTML, JavaScript, Zeit, time">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Mnz">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/aufenthaltsdauer.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Verweisliste als Auswahlliste" href="verweisliste.htm">
<link rel="prev" title="Dynamische grafische Buttons" href="buttons.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Aufenthaltsdauer auf Web-Seite anzeigen</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/aufenthaltsdauer.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>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 fr HTML-Dateien, die innerhalb eines Frame-Fensters stndig angezeigt bleiben, etwa in einem Frame-Fenster mit einem Logo oder mit Verweisen. In solchen Fllen luft die Uhr whrend der gesamten Besuchszeit, die der Anwender auf den Seiten verbringt. Man mag das als eine berflssige 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 ntzlich sein.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>Das Beispiel zeigt die HTML-Datei, in der das JavaScript und die Zeitanzeige stehen. Im Anzeigebeispiel ist diese Datei in ein Frameset eingebunden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/aufenthaltsdauer.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Startzeit ermitteln:</h4>
<p>Beim Einlesen der Datei wird zunchst der aktuelle Zeitpunkt ermittelt. Dieser Zeitpunkt dient als Startzeit der Anzeige. Mit <code>Jetzt = new Date()</code> wird ein neues <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/date.htm">Datumsobjekt</a> mit dem aktuellen Zeitpunkt in der Variablen <code>Jetzt</code> gespeichert. Mit <code>Jetzt.getTime</code> wird eine absolute Zahl in Millisekunden ermittelt, die in der Variablen <code>Start</code> gespeichert wird.</p>
<h4>Funktion zur Zeitanzeige erstmals aufrufen:</h4>
<p>Im einleitenden <code><body></code>-Tag steht im Beispiel der erste Aufruf der Funktion <code>ZeitAnzeigen()</code>, die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert. Der erste Aufruf erfolgt nach einer Sekunde. Dazu wird der Funktionsaufruf in die <code>setTimeout()</code>-Methode mit einer Verzgerungszeit von 1000 Millisekunden (1 Sekunde) eingebettet.<br>
Im Dateikrper steht dann ein Formular, das nur aus einem einzigen kleinen Eingabefeld besteht. Dieses Eingabefeld wird als Ausgabefeld fr die Zeitanzeige zweckentfremdet. Es wird mit dem Wert <code>00:00</code> vorbelegt, damit auch in der ersten Sekunde schon etwas in dem Feld steht.</p>
<h4>Zeit anzeigen und Anzeige laufend aktualisieren:</h4>
<p>Die Funktion <code>ZeitAnzeigen()</code>, die fr die laufende Zeitanzeige verantwortlich ist, ruft zunchst die Unterfunktion <code>ZeitBerechnen()</code> auf. Diese Funktion erzeugt bei jedem Aufruf ein neues Datumsobjekt mit dem aktuellen Zeitpunkt. Das Ergebnis wird in der Variablen <code>Immernoch</code> gespeichert. Zurckgegeben wird jedoch nicht der aktuelle Zeitpunkt, sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt, der beim Einlesen der Datei ermittelt wurde. Der Rckgabewert erfolgt in Sekunden. Da beim Datumsobjekt intern in Millisekunden gerechnet wird, wird der Wert durch 1000 geteilt, um Sekunden zu erhalten. Dabei knnen jedoch Bruchzahlen zustande kommen. Um eine glatte Sekundenzahl zu erhalten, wendet die aufrufende Funktion <code>ZeitAnzeigen()</code> die Methode <code>Math.round()</code> an.</p>
<p>Die absolute Anzahl der vergangenen Sekunden steht dann in der Variablen <code>absSekunden</code>. Von dem darin gespeicherten Wert werden alle folgenden Werte abgeleitet. Mit <code>Math.round((absSekunden-30)/60)</code> 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 <code>absMinuten</code> gespeichert. Da Opera 5.12 in den ersten 30 Sekunden als Ergebnis der Operation <code>-0</code> zurckliefert, wird zur Unterdrckung des Minuszeichens mit <code>Math.abs</code> der absolute Betrag des Wertes ermittelt. Der Restwert an Sekunden, also bei 200 und 180 etwa der Wert 20, wird mit der Modulo-Division <code>absSekunden % 60</code> in der Variablen <code>relSekunden</code> gespeichert. Im Falle von 200 steht dann also in <code>absMinuten</code> der Wert 3 und in <code>relSekunden</code> der Wert 20.</p>
<p>Um die Anzeige der Minuten und Sekunden fr die Ausgabe ordentlich zu formatieren, werden Zeichenketten erzeugt, die in den Variablen <code>anzSekunden</code> und <code>anzMinuten</code> gespeichert werden. Wenn eine Minuten- oder Sekundenzahl einstellig ist, bekommt sie eine 0 vorangestellt.</p>
<p>Mit der Zuweisung an <code>window.document.Anzeige.Zeit.value</code> wird die ermittelte und formatierte Zeit anschlieend in das Formularfeld geschrieben, das zur Zeitanzeige dient. Damit die Zeitanzeige weiterluft, ruft sich die Funktion <code>ZeitAnzeigen()</code> am Ende mit einer Verzgerungszeit von 1000 Millisekunden, also einer Sekunde, selbst wieder auf. Dadurch wird der gesamte Vorgang wiederholt.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="verweisliste.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="verweisliste.htm">Verweisliste als Auswahlliste</a>
</td></tr>
<tr>
<td class="doc"><a href="buttons.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="buttons.htm">Dynamische grafische Buttons</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2005 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
