 Analoge Uhr am Mauszeiger 02
(mit Kalender)
Eine dynamische, analoge Uhr mit 12-Stunden Zeitanzeige von Rainbow Arch. Funktioniert in allen neuen Browsern. Zusätzlich zur Uhrzeit wird das Datum gegenläufig angezeigt. Alternativ kann ein Button zum Ausblenden der Uhr angezeigt werden.
Die Werte für die aktuelle Zeit werden der Systemzeit des lokalen Rechners entnommen. Eine Abfrage im Sekundentakt aktuallisiert die Anzeige. Den Sekunden-, Minuten und Stundenwerten werden die entsprechenden Positionen neben dem Mauszeiger zugeordnet und dort werden kleine, farbige Pixel oder Texte (Zahlen) angezeigt. Mit der Bewegung des Mauszeigers werden diese Positionen neu berechnet.
Alternative Darstellungen sind durch Austausch der Farben möglich.
Aufwand:
- CSS-Anweisungen in den HEAD-Bereich kopieren
- Das JavaSript in den Body-Bereich (vor dem </body>-Tag) kopieren
- Script-Code für den Button in den BODY-Bereich kopieren
Den Quellcode entnehmen sie der Textdatei (Link zum Öffnen des Fensters oben unter 'Scriptcode').
Änderungen / Anpassungen
Folgende Farbangaben können sie individuell anpassen
- Datum Farbe
- Ziffern Farbe
- Sekundenzeiger Farbe
- Minutenzeiger Farbe
- Stundenzeiger Farbe
Im Quellcode:
dCol='#2C6ED5'; // Datum Farbe
fCol='#000000'; // Ziffern Farbe
sCol='#000000'; // Sekundenzeiger Farbe
mCol='#2C6ED5'; // Minutenzeiger Farbe
hCol='#FF0000'; // Stundenzeiger Farbe
Zur Anpassung der Farben im Script:
| Element |
Variable |
hier im Beispiel |
ersetzen mit |
| Datumfarbe |
dCol |
#2C6ED5 (blau) |
HTML-Farbwert |
| Ziffernfarbe |
fCol |
#000000 (schwarz) |
HTML-Farbwert |
| Sekundenzeiger |
sCol |
#000000 (schwarz) |
HTML-Farbwert |
| Minutenzeiger |
mCol |
#2C6ED5 (blau) |
HTML-Farbwert |
| Stundenzeiger |
hCol |
#FF0000 (rot) |
HTML-Farbwert |
|
 Mit CSS-Angaben wurde das Erscheinungsbild
des Umschalte-Buttons bestimmt.
CSS-Anweisungen im Head:
<style type="text/css">
<!--
.schalter {
cursor: hand;
border: #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background-color: #FFE669;
width:120px;
font-size: 10px;
}
-->
</style>
CSS-Klasse im Input-Tag eintragen :
<script type="text/javascript" language="JavaScript">
<!--
if (document.getElementById&&!document.layers){
document.write('<input class="schalter" ... ">');
}
//-->
</script>
| 
WWW.WEB-TOOLBOX.NET
ScriptCode 
ZURÜCK