 Dynamische Uhrzeit 2 (Layer oder DIV-Bereich)
Dieses Beispiel arbeitet ähnlich wie das Beispiel 1. Hier im Beispiel 2 beschränke ich mich auf die Darstellung der Uhrzeit.
Dazu wird laufend (jede Sekunde) die aktuelle Systemzeit ermittelt das Ergebnis in die HTML-Seite geschrieben.
Darstellung:
Die Formatierung der Anzeige wurde erweitert (Rahmen Farben Schriftformatierung).
Für die etwas aufgepeppte Darstellung wurde die Anzeige der Uhrzeit in eine Tabelle eingebunden. Die Schriftformatierung für die Tabellenzelle (Text) und die Formatierung der Tabelle selbst wurden mittels CSS festgelegt. So können sie die Darstellung leicht an ihre Seite anpassen.
Neben den Angaben für das Element mit der ID 'uhr2' finden sie im CSS-Bereich die beiden Klassen für die Schrift- und Tabellenformatierung der Darstellung.
<style type="text/css">
<!--
#uhr2 {
position:absolute;left:50;top:210;
}
.text {
font-size:22px;
color:#7DBEFF;
font-weight:bold;
background-color: #2F2F2F;
}
.tab {
border: 1px solid #000000;
width: 160px;
height: 40px;
}
-->
</style>
Aufwand
1) CSS-Anweisungen im Head-Bereich notieren
2) JavaScript-Anweisungen im Head notieren
3) JavaScript im Body-Bereich notieren
4) X - Y Positionen anpassen
Im Body-Bereich:
Im Beispiel 1 sind die Schreibanweisungen in einer Funktion zusammen gefasst und werden im Body mittes Aufruf geschrieben. Hier im Beispiel 2 stehen die Anweisungen gleich im Body-Bereich.
Die Definition des Anzeigebereichs wird vom JavaScript abhängig vom verwendeten Browser unterschiedlich geschrieben. Die Anweisungen können gleich nach dem BODY-Tag notiert werden.
Nach der Untersuchung des verwendeten Browsers wird mittels JavaScript, abhängig vom erkannten Browser, der entsprechende Code geschrieben. Es wird entweder ein <div>-Bereich oder ein Layer definiert.
<script type="text/javascript" language="JavaScript">
<!--
if (document.getElementById)
...
if (document.layers)
...
if (document.getElementById&&!document.all)
...
//-->
</script>
Anpassungen für die Position
Zur Anpassung der Position für die dynamische Anzeige ersetzen sie die X-Y-Werte mit den passenden Angaben. Hier sind die Werte mit 20 (linker Abstand) und 210 (von oben) festgelegt. Diese Werte finden sie im CSS-Bereich und im JavaScript.
| Element |
hier im Beispiel |
ersetzen mit |
| Position von links |
20 |
Wert in Pixel |
| Position von oben |
210 |
Wert in Pixel |
|
| 
WWW.WEB-TOOLBOX.NET
Demo
ZURÜCK