ANWENDUNGSBEISPIEL
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 diese Beispieldatei
(digitime.html) und kann deshalb auch Offline durchgesehen werden.
- Das vorliegende Script besteht aus zwei Teilen:
1. dem Definitionsscript für die "function uhrEinfuegen()"
und
2. dem Startscript für diese Funktion.
Um die Scripts einfach in Deine HomePage zu bekommen, gehst Du am Besten folgendermaßen vor:
Du markierst am Bildschirm weiter unten die drei blauen Textabschnitte mit der Maus,
stellst sie jeweils mit Ctrl-C in die Zwischenablage und kopierst sie dann
mit Ctrl-V in Deine HTML-Seite.
- 1. Den Quelltext des Definitions-Scripts stellst Du in den "HEAD"-Teil Deiner HTML-Seite stehen.
Nur so ist sichergestellt, daß das Script abgearbeitet erfaßt wurde, bevor vom Anwender
irgendeine Aktion gestartet werden kann.
Groß- und Kleinschreibung muß beachtet werden!
Der Quelltext zum Einbinden in Deine HTML-Seite lautet in diesem Beispiel so:
<script type="text/javascript">
<!-- begin// Für alte Browser verstecken
var ziffern;
var timerID;
function uhrEinfuegen() {
document.write('<IMG NAME="stundenZehner" SRC="digi0.gif">');
document.write('<IMG NAME="stundenEiner" SRC="digi0.gif">');
document.write('<IMG SRC="digi_dp.gif">');
document.write('<IMG NAME="minutenZehner" SRC="digi0.gif">');
document.write('<IMG NAME="minutenEiner" SRC="digi0.gif">');
document.write('<IMG SRC="digi_dp.gif">');
document.write('<IMG NAME="sekundenZehner" SRC="digi0.gif">');
document.write('<IMG NAME="sekundenEiner" SRC="digi0.gif">');
ziffern = Array(10);
for(var i = 0; i < 10; i++) {
ziffern[i] = new Image;
ziffern[i].src = 'digi' + i + '.gif';
}
timerID = setTimeout('uhrAktualisieren()', 1000);
}
function uhrAktualisieren() {
var zeit = new Date();
var stunden = zeit.getHours();
var minuten = zeit.getMinutes();
var sekunden = zeit.getSeconds();
document.stundenZehner.src = ziffern[Math.floor(stunden / 10)].src;
document.stundenEiner.src = ziffern[stunden % 10].src;
document.minutenZehner.src = ziffern[Math.floor(minuten / 10)].src;
document.minutenEiner.src = ziffern[minuten % 10].src;
document.sekundenZehner.src = ziffern[Math.floor(sekunden / 10)].src;
document.sekundenEiner.src = ziffern[sekunden % 10].src;
timerID = setTimeout('uhrAktualisieren()', 1000);
}
// end -->
</script>
- Hinweise zur individuellen Anpassung
Im Script brauchst Du nichts anpassen. Du kannst allerdings die Ziffern verändern. Dazu
sind 7 Zahlensätze (zahlen1.zip - zahlen7.zip) beigelegt. Du mußt sie lediglich entpacken
und in das gewünschte Verzeichnis kopieren. Der aktuellen Zahlensatz befindet sich
in "zahlen1.zip". Natürlich kannst Du auch Deine eigenen Ziffern erstellen, da es sich
um einfache GIF-Grafiken handelt. Falls Du abweichende Dateinamen wählst, mußt Du
das Skript natürlich anpassen.
- 3. Jetzt ist alles vorbereitet und die Digitaluhr kann ausgegeben werden.
Dazu stellst Du folgenden Code an die gewünschte Stelle im Body-Teil Deiner HTML-Seite:
<script type="text/javascript">
<!-- begin// Für alte Browser verstecken
uhrEinfuegen();
// end -->
</script>
Das Skript stammt aus der CD "JAVAScript WORKSHOP" vom Franzis-Verlag.
Die Zahlensätze 2-6 hat Bernd Schwalbe erstellt.