ANWENDUNGSBEISPIEL
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 Ergänzung zum Originalscript des Autoren Stefan Münz habe ich für das Ausgabefenster
einige Formatierungsmöglichkeiten eingebaut.
Der Nachteil dabei: Nicht jeder Browser kann dies interpretieren. Das ist jedoch nicht
so problematisch, denn in diesem Fall wird einfach das 'Standard'fenster angezeigt.
Zurück zur Script-Auswahl oder dieses
Script-Archiv laden?
EINBINDUNG DES SCRIPTS IN DEINE HOMEPAGE:
Falls Du das Script-Archiv bereits geladen hast, so brauchst Du jetzt nicht
mehr weiterzulesen. Das Archiv enthält auch diese Beispieldatei
(stoppuhr.html) und kann deshalb Offline durchgesehen werden.
- Das vorliegende Script besteht aus zwei Teilen:
1. Einem Java-Script im HEAD-Bereich.
2. Einem Ausgabefeld für die Zeitanzeige im BODY-Bereich.
- Das JAVA-Script für den "HEAD"-Teil sieht folgendermaßen aus:
(Groß- und Kleinschreibung muß beachtet werden!)
<META http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!-- Start 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);
}
window.onLoad=window.setTimeout('ZeitAnzeigen()',1000) //Im Originalscript steht der Event-Handler im Body-Tag
// - Ende JavaScript - -->
</script>
- Das Ausgabefeld für die Zeitanzeige im BODY-Bereich sieht folgendermaßen aus:
<form action="" name="Anzeige">
<input size="7" name="Zeit" value="00:00">
</form>
Zur Zeitanzeige wird hier ein Formulareingabefeld als Ausgabefeld zweckentfremdet.
Es wird mit dem Wert 00:00 vorbelegt, damit auch in der ersten Sekunde schon etwas in
dem Feld steht.
- Hinweise zur individuellen Anpassung
Ganz einfach: Es braucht nichts angepasst werden. Du kopierst die beiden Teile wie
vorgesehen in Deine HTML-Seite.
Solltest Du das Ausgabefeld wie in meinem Beispiel noch nach eigenem Geschmack formatieren
wollen, so kannst Du das mit Hilfe von CSS-Befehlen machen.
Meine Zusätze findest Du in rot:
<form action="" name="Anzeige" style="width:75px; BORDER-LEFT:#0399fd 7px solid; BORDER-TOP:#0381d6 7px solid; BORDER-RIGHT:#034876 7px solid; BORDER-BOTTOM:#0369ac 7px solid;">
<input size="7" name="Zeit" value="00:00" style="width:75px; color:#ffffff; background-color:#000080; font-size:14pt; font-family:Arial,sans-serif; text-align:right;">
</form>
Alle Farbwerte müssen im hexadezimalen Farbwert angegeben werden. Falls Du Dich damit
nicht auskennst, so besuch doch einfach mal die Scriptseite "Systemdaten" im Café Espresso.
Hier findest Du im Menüpunkt "FarbHexcode" eine Zusammenstellung der gebräuchlichen Farbwerte.
Die Bedeutung der Parameter erklären sich aus den Namen. Solltest Du damit nicht klarkommen,
so gibt es auch hier eine Hilfe.
Stefan Münz ist nicht nur der Autor dieses Scripts, er hat auch eine umfangreiche Hilfe
für uns HomePage-Bastler geschrieben (SELFHTML). Du kannst diese Seiten kostenlos von
seiner WebSite laden.
Ein Wort dazu: Auf den ersten Blick ist die dort angebotene Informationsfülle verwirrend.
Die Seiten sind insofern für 'Newbies' vielleicht nicht optimal. Falls Du Dich aber mit
HTML schon ein bisschen auskennst findest Du in SELFHTML nach kurzer Eingewöhnungszeit
alle Tags und Parameter, an die Du Dich gerade nicht erinnern kannst.
Das gilt sowohl für HTML/XHTML als auch für CSS Style-Sheets, XML/DTDs, JavaScript/DOM,
Dynamisches HTML, CGI/Perl und PHP!
Der Autor ist Stefan Münz
Auf seiner HomePage
http://selfaktuell.teamone.de
findest Du sein 'Lehrbuch' SELFHTML und viele weitere Hilfen.