ANWENDUNGSBEISPIEL
Text- und Hintergrundfarbe entstehen in Abhängigkeit von der
aktuellen Uhrzeit.
Momentane Kombination:
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
(back.htm) und kann deshalb auch Offline durchgesehen werden.
- Das vorliegende Script besteht aus
zwei Quelltexten.
Um das Script einfach in Deine HomePage zu bekommen, gehst Du am Besten
folgendermaßen vor:
Du markierst am Bildschirm weiter unten die roten Textabschnitte mit der Maus,
stellst sie jeweils mit Ctrl-C in die Zwischenablage und kopierst sie dann
mit Ctrl-V in Deine HTML-Seite.
- Die Quelltexte sollten am Anfang der HTML-Seite stehen. Groß- und Kleinschreibung
muß beachtet werden!
Der Quelltext, der in Deiner HTML-Seite die Hintergrundfarbe festlegt, lautet in diesem
Beispiel so:
<SCRIPT language="JavaScript">
<!-- begin// Für alte Browser verstecken
function bgfarbe()
{
//Definition der Hintergrundfarbe
morgen_bgfarbe="deepskyblue"
mittag_bgfarbe="lightcyan"
abend_bgfarbe="cornflowerblue"
nacht_bgfarbe="darkblue"
//Die aktuelle Zeit ermitteln
jetzt=new Date()
//Aus der Zeit die Stunde herausfiltern
stunde=jetzt.getHours()
//Anhand der Stunde ermitteln, welche Tageszeit wir haben
if (stunde >= 6 && stunde < 10)
{
return morgen_bgfarbe
}
if(stunde >= 10 && stunde <17)
{
return mittag_bgfarbe
}
if(stunde >= 17 && stunde < 21)
{
return abend_bgfarbe
}
if(stunde > 21 || stunde < 6)
{
return nacht_bgfarbe
}
}
// ende -->
</script>
- Hinweise zur individuellen Anpassung
Im aktuellen Beispiel sind 4 unterschiedliche Farb-Zeitzonen definiert:
//Definition der Hintergrundfarbe
morgen_bgfarbe="deepskyblue"
mittag_bgfarbe="lightcyan"
abend_bgfarbe="cornflowerblue"
nacht_bgfarbe="darkblue"
Wenn Du andere Farben wünscht, kannst Du Werte in Hochkommata einfach verändern.
Der Farbwert kann wie hier als "Echtname" oder als RGB-Wert angegeben werden. Mach es Dir
einfach und lade auf Script-Seite 3 die Datei "Farbe-Hexcode". Hier findest Du alle
vordefinierten Farbwerte.
Weiter unten im Script findest Du die Festlegung der Zeitzonen:
//Anhand der Stunde ermitteln, welche Tageszeit wir haben
if (stunde >= 6 && stunde < 10)
.
.
.
Die Morgenstunden liegen also zwischen 6 und 10 Uhr, der Mittag ist zwischen 10 und 17 Uhr
festgelegt, als Abend wird die Zeit zwischen 17 und 21 Uhr angesehen, die Nacht beginnt
um 21 und endet um 6 Uhr. Die Veränderung der Zeitspannen bewirkst Du also durch einfache
Änderung der Zahlenwerte.
Damit der Text gut lesbar ist, sollte die Textfarbe in Abhängigkeit von der Hintergrund-
farbe geschaltet werden.
Ein Negativbeispiel ist in dieser Datei die rote Farbe. Sie wird nicht angepaßt und hat
deshalb Kontrastprobleme in den Abendstunden.
Der Quelltext, der in Deiner HTML-Seite die Textfarbe festlegt, lautet in diesem Beispiel so:
<SCRIPT language="JavaScript">
<!-- begin// Für alte Browser verstecken
document.bgColor=bgfarbe()
/* In diesem Script wird eine passende Schriftfarbe festgelegt */
if (bgfarbe() == "darkblue")
{
document.fgColor="yellow"
}
else if (bgfarbe() == "deepskyblue")
{
document.fgColor="black"
}
else if (bgfarbe() == "lightcyan")
{
document.fgColor="navy"
}
else if (bgfarbe() == "cornflowerblue")
{
document.fgColor="white"
}
// ende -->
</script>
Eine Veränderung wird hier durch einfache Anpassung von "yellow", "black", "navy" und
"white" erreicht. Wie bei den Hintergrundfarben können auch hier Echtnamen oder RGB-Werte
eingesetzt werden.
- ZUSATZ:
In der HTML-Version 4.0 werden folgende Änderungen eingefügt:
1. Im Head-Teil sollte ein Meta-Tag mit folgendem Aufbau stehen:
<META http-equiv="Content-Script-Type" content="text/javascript">
2. Der Start-Tag für das Script wurde verändert. Er lautet jetzt:
<script type="text/javascript">
Der alte Aufbau ist jedoch auch weiterhin funktionsfähig.
Script von Bernd Schwalbe auf Grundlage eines Artikels in der PC-Online.