Analog Uhren - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

Analog Uhren

Scripte > Daytime

Analog-Uhren in vielfältiger Auswahl

Ob Javascript oder Flash, ob groß oder klein - eine kleine Auswahl an analogen Uhren. Diese Uhren sind im handumdrehen auf der Homepage eingebaut.
Bei Flash-Uhren wird der Adobe Flashplauer zum Abspielen von Flashdateien benötigt. Dazu muss das Browser-Plugin installiert und aktiviert sein. Bei den Javascript-Uhren verhält es sich ähnlich, nur dass das Plugin meist bereits installiert und aktiviert ist.
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 (nicht bei Flash-Uhren).

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.
Download Button
Downloads:
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>
Flash Rund-Uhr
(color)
Flash Rund-Uhr
(white)
Flash Rund-Uhr
(transparent)
Die Darstellungsgröße der Flash-Uhren wird im HTML-Code über die Parameter width="160" und height="160" festgelegt. Durch den Austausch der Imagedateien im HTML-Code erhälten die Uhren ein anderes Design.
Download Button
Downloads:
Code für den <BODY> Bereich
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="160"
height="160"
id="flashuhr_color" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="wsX5Obj/Obj14_2/flashuhr.swf />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="h_c=000000&m_c=000000&s_c=ff9900&disc=000000&grafik=wsX5Obj/Obj14_2/flashuhr_color.png" />
<embed
src="wsX5Obj/Obj14_2/flashuhr.swf"
flashvars="h_c=000000&m_c=000000&s_c=ff9900&disc=000000&grafik=wsX5Obj/Obj14_2/flashuhr_color.png"
quality="high"
wmode="transparent"
width="160"
height="160"
name="flashuhr_color"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>

Zur Änderung des Design einfach nur die entsprechende Imagedatei an den entspechenden Stellen eintragen:
flashuhr_color.png, flashuhr_white.png, flashuhr_transp.png
Flash Mini-Uhr
(50 x 50)
Flash Mini-Uhr
(70 x 70)
Flash Mini-Uhr
(90 x 90)
Flash Mini-Uhr
(110 x 110)
Die Darstellungsgröße der Flash-Uhren wird im HTML-Code über die Parameter width="..." und height="..." festgelegt. Die Hintergrundfarbe verändert sich durch den Eintrag background-color="#......" im HTML-Code.
Download Button
Downloads:
Code für den <BODY> Bereich
<embed
src="wsX5Obj/Obj14_3/miniuhr.swf"
style="background-color:#5F5F5F; width:110px; height:110px;"   // Größe und Hintergrundfarbe anpassen
wmode="transparent"         
type="application/x-shockwave-flash"
/>
JS Canvas-Uhr
(Obj14_4a)
JS Canvas-Uhr
(Obj14_4b)
JS Canvas-Uhr
(Obj14_4c)
JS Canvas-Uhr
(Obj14_4d)
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.
Download Button
Downloads:
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_4/jquery.js"></script>
<!--[if IE]><script src="wsX5Obj/Obj14_4/clocktime-ie.js"></script><![endif]-->
<script src="wsX5Obj/Obj14_4/clocktime.js"></script>
Code für den <BODY> Bereich
Javascript Canvas-Uhr (Obj14_4a):
<canvas class="ClockTime:Obj14_4a" style="background-color: transparent;"></canvas>

Javascript Canvas-Uhr (Obj14_4b):
<canvas class="ClockTime:Obj14_4b" style="background-color: #ffff61;"></canvas>

Javascript Canvas-Uhr (Obj14_4c):
<canvas class="ClockTime:Obj14_4c" style="background-color: #fff;"></canvas>

Javascript Canvas-Uhr (Obj14_4d):
<canvas class="ClockTime:Obj14_4d" style="background-color: #fff;"></canvas>

Hintergrund (background-color) kann beliebig gewählt werden.
Feedbacks zu ""

Stefan

14.06.2015, 13:18

+0 -0  

Code Javascript Canvas Uhren:Im Head-Bereich muss jquery.js eingebunden werden weil sonst keine Initialisierung erfolgt.Alternativ könnte vor dem body Abschluss ( ) folgender Aufruf eingefügt werdenClockTime.findAndCreateClocks();Ansonsten: Tolle Seite, tolle Sammlung aktueller und klassischer Web-Elemente. Vielen lieben Dank dafür!

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 15 Heute
            » 119 Gestern
            » 544 Woche
            » 908 Monat
            » 42122 Jahr
            » 266328 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt