Objekte und JavaScript - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 168

...
zit[5] =
"Alter ist die Zeit, wo die Erinnerung an die Stelle der Hoffnung tritt.";
function zitat() {
var besuch = new Date().getHours();
if (besuch < 4) {
document.write(zit[0]);
} else if (besuch < 8) {
document.write(zit[1]);
} else if (besuch < 12) {
document.write(zit[2]);
} else if (besuch < 16) {
document.write(zit[3]);
} else if (besuch < 20) {
document.write(zit[4]);
} else {
document.write(zit[5]);
}
}
In dem Beispiel wird ein Datenfeld zit erzeugt und mit sechs verschiedenen Texten gefüllt.
In der Funktion wird mit getHours() die Stunde der Systemzeit des Besuchers ausgelesen
und in der folgenden if -Entscheidung je nach Stunde einer der Texte aus dem Datenfeld
angezeigt.
PrAXISTIPP: Natürlich können Sie die Inhalte auch mit einem Zufallsprozess
auswählen. Dazu gibt es mit Math.random() eine geeignete Basis zum Erzeugen
eines Zufallswerts.
Die optische Veränderung einer Seite je nach Zeitpunkt
Wir wollen noch ein weiteres Rezept zeigen, mit dem Sie einen wiederkehrenden Besucher
über eine automatisierte Aktion bei Laune halten können. Dazu verändern Sie dynamisch
nur das Layout einer Webseite mit Style Sheets auf Grund des Zeitpunkts des Besuchs. Das
kann auf Grund eines zufälligen oder zeitlichen Ereignisses erfolgen. Bei einer zeitlichen
Variante können Sie die Zeitintervalle beliebig wählen. Sinnvoll ist etwa ein unterschiedli-
ches Layout an jedem Tag der Woche oder ein Unterschied zwischen vormittags und nach-
mittags beziehungsweise abends. Das können Sie natürlich damit erreichen, dass Sie die
Inhalte einer Webseite dynamisch schreiben und dabei gleich die Layoutangaben dyna-
misch verändern. Aber es geht noch viel besser, wenn Sie auf Style Sheets zurückgreifen.
Erzeugen Sie einfach mehrere externe Style-Sheet-Dateien und binden Sie diese zeitgesteu-
ert mit JavaScript ein, etwa so, wie in dem folgenden Beispiel, das mit einer HTML-Datei
sowie zwei Style-Sheet-Dateien arbeitet. Hier ist zuerst die HTML-Datei (kap7_7.html):
Listing 7.17■ Die HTML-Datei bindet zeitgesteuert verschiedene CSS-Dateien ein.
...
<script type="text/javascript" src="lib/js/kap7_7.js"></script>
<script type="text/javascript">
stil();
</script>