Analog Uhren
Scripte > Daytime
Analog-Uhren in vielfältiger Auswahl
Ob einfache Javascript-Uhren oder Canvas-Uhren, ob groß oder klein - eine kleine Auswahl an analogen Uhren. Diese Uhren sind im handumdrehen auf der Homepage eingebaut. Die Uhren können individuell nach Bedarf über die Style-Eigenschaften angepasst werden. Dazu auch die Hinweise bei den jeweiligen Uhren beachten.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. Je nach einzubauender Uhr den HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Javascript Rund-Uhr
Die Anpassung an die Homepage sowie die Gestaltung der Javascript Rund-Uhr müssen in der Datei "rundclock.css" durchgeführt werden.
Ggf. ist auch eine Styleanpassung auch in der Javascript-Datei "rundclock.js" erforderlich.
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj14_1/roundclock.css" />
Code für den <BODY> Bereich
<div class="Obj14_form"> <!-- Einstellung Randabstand oben und links in der "rundclock.css" -->
<script src="wsX5Obj/Obj14_1/rundclock.js"></script>
</div>
JS Canvas-Uhr
(Obj14_2a)
(Obj14_2a)
JS Canvas-Uhr
(Obj14_2b)
JS Canvas-Uhr
(Obj14_2c)
JS Canvas-Uhr
(Obj14_2d)
Die Anpassungen, Änderungen oder sogar Erweiterungen der Canavas-Uhren im Style erfolgen in der Javascript-Datei "clocktime.js".
Durch den Ausstausch der Classifizierungs-ID erhalten die Uhren dann ein anderes Design.
Code für den <HEAD> Bereich
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj14_2/jquery.js"></script>
<!--[if IE]><script src="wsX5Obj/Obj14_4/clocktime-ie.js"></script><![endif]-->
<script src="wsX5Obj/Obj14_2/clocktime.js"></script>
Code für den <BODY> Bereich
Javascript Canvas-Uhr (Obj14_2a):
<canvas class="ClockTime:Obj14_2a" style="background-color: transparent;"></canvas>
Javascript Canvas-Uhr (Obj14_2b):
<canvas class="ClockTime:Obj14_2b" style="background-color: #ffff61;"></canvas>
Javascript Canvas-Uhr (Obj14_2c):
<canvas class="ClockTime:Obj14_2c" style="background-color: #fff;"></canvas>
Javascript Canvas-Uhr (Obj14_2d):
<canvas class="ClockTime:Obj14_2d" style="background-color: #fff;"></canvas>
Hintergrund (background-color) kann beliebig gewählt werden.
» nach oben «