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 > Attachment

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. Die Uhren können individuell nach Bedarf über die Style-Eigenschaften der 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
<style type="text/css">
.forIE { position: absolute; top: 0px; left: 0; height: 10px; width: 10px; }
.clock {
 position:absolute;
 width: 80px;
 height: 80px;
 top: 85px;
 left: 400px;
 font-family: Arial;
 font-size: 16px;
 font-weight: bold;
 color: #000;
}
.sec {
 position: absolute;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 30px;
 color: #00FF41;
 text-align: center;
 font-weight: bold;
}
.min {
 position: absolute;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 30px;
 color: #FF0000;
 text-align: center;
 font-weight: bold
}
.std {
 position: absolute;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 30px;
 color: #FF0000;
 text-align: center;
 font-weight: bold
}
</style>
Code für den <BODY> Bereich
<script type='text/javascript'>
// 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 type="text/javascript" src="wsX5Obj/Obj14_0/clocktime-ie.js"></script><![endif]-->
<script type="text/javascript" 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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 56 Heute
» 654 Gestern
» 710 Woche
» 23827 Monat
» 99318 Jahr
» 427074 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt