Analog Uhren - Website X5 Hilfe - Die 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 benötigt, der bei fast jedem Nutzer bereits installiert ist. Je nach Einstellung im Browser muss dieser für das Skript (oder alle Skripte) zugelassen werden.
Die Uhren können individuell nach Bedarf über die Style-Eigenschaften an die Homepage angepasst werden. Dazu im HEAD-Bereich oder in der Jacascript-Datei der jeweiligen Uhr die Anpassungen durchführen und ggf. auch die Hinweise 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).
Download Button
x runter geladen!

Javascript Rund-Uhr


Code für den <HEAD> Bereich
<link type="text/css" rel="stylesheet" href="wsX5Obj/Obj14_0/roundclock.css" />
Code für den <BODY> Bereich
<script>
// Grundeinstellungen
ClockHeight=80;     // musss gleich mit CSS-Class .clock "height:" sein
ClockWidth=80;      // musss gleich mit CSS-Class .clock "width:" sein
H='....';           // Länge Stundenzeiger
M='.....';          // Länge Minutenzeiger
S='.....';          // Länge Sekundenzeiger
HandY=-17;          // Zeigerachse horizontal
HandX=-2.5;         // Zeigerachse vertikal

// Ab hier nichts mehr ändern!
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
H=H.split('');
M=M.split('');
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
speed=0.6;
ie=(document.getElementById);
Face=Face.split(' ');
n=Face.length;
ymouse=0;
xmouse=0;
scrll=0;
props="<font><B>";
Split=360/n;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0;}
if (ie){
document.write('<div id="Of" class="clock"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace'+i+'" class="forIE">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" class="clock"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours'+i+'" class="std">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" class="clock"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes'+i+'" class="min">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" class="clock"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds'+i+'" class="sec">'+S[i]+'</div>');
document.write('</div></div>')
}
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
for (i=0; i < n; i++){
var F=document.getElementById('ieFace'+i).style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll+"px";
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180)+"px";
}
for (i=0; i < H.length; i++){
var HL=document.getElementById('ieHours'+i).style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll+"px";
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs)+"px";
}
for (i=0; i < M.length; i++){
var ML=document.getElementById('ieMinutes'+i).style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll+"px";
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min)+"px";
}
for (i=0; i < S.length; i++){
var SL=document.getElementById('ieSeconds'+i).style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll+"px";
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec)+"px";
}
currStep-=step;
}
function Delay(){
scrll=0;
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
</script>
<br>
<script type="text/javascript">
function addEvent471(obj,type,fn) {
if(obj.addEventListener){
obj.addEventListener(type,fn,false)
} else if(obj.attachEvent) {
obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn]window.event) };
obj.attachEvent("on"+type,obj[type+fn])}};addEvent471(window,'load',Delay);
</script>
Flash Rund-Uhr
(color)
Flash Rund-Uhr
(white)
Flash Rund-Uhr
(transparent)
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="200" height="200"
id="flashuhr_color" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="wsX5Obj/Obj14_0/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_0/flashuhr_color.png" />
<embed
src="wsX5Obj/Obj14_0/flashuhr.swf"
flashvars="h_c=000000&m_c=000000&s_c=ff9900&disc=000000&grafik=wsX5Obj/Obj14_0/flashuhr_color.png"
quality="high"
wmode="transparent"
width="200" height="200"
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)
Code für den <BODY> Bereich
<embed
src="wsX5Obj/Obj14_0/miniuhr.swf"
style="background-color:#5F5F5F; width:110px; height:110px;" // Größe und Hintergrundfarbe anpassen
wmode="transparent"
type="application/x-shockwave-flash"
/>
Javascript Canvas-Uhr
(Obj14_1)
Javascript Canvas-Uhr
(Obj14_2)
Javascript Canvas-Uhr
(Obj14_3)
Javascript Canvas-Uhr
(Obj14_4)
Code für den <HEAD> Bereich
<!-- Hinweis: Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj14_0/jquery.js"></script>
<!--[if IE]><script src="wsX5Obj/Obj14_0/clocktime-ie.js"></script><![endif]-->
<script src="wsX5Obj/Obj14_0/clocktime.js"></script>
Code für den <BODY> Bereich
<canvas
class="ClockTime:Obj14_1"
style="background-color: transparent;">
</canvas>

ID entsprechend einfach nur anpassen
ID Javascript Canvas-Uhr (Obj1
4_1):  ClockTime:Obj14_1
ID Javascript Canvas-Uhr (Obj14_2):  ClockTime:Obj14_2
ID Javascript Canvas-Uhr (Obj14_3):  ClockTime:Obj14_3
ID Javascript Canvas-Uhr (Obj14_4):  ClockTime:Obj14_4
Hintergrund kann beliebig gewählt werden: background-color: #......
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 39 Heute
» 317 Gestern
» 752 Woche
» 2460 Monat
» 131602 Jahr
» 459358 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt