Analog Uhren - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

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. Einfach die ZIP-Datei herunter laden, entpacken und die entsprechende Uhr aussuchen.
Die Javascript Canvas-Uhren können individuell nach Geschmach und Bedarf angepasst werden. Dazu die Hinweise im Code für das "HTML-Objekt" beachten.
Für die Navigation auf dieser Homepage wird der Flash-Player von Adobe benötigt.

Bitte darauf achten, dass die aktuelle Flash Player Version installiert und das Plugin auch aktiviert ist.

Flash Rund-Uhr bunt

Flash Rund-Uhr weiß

Flash-Uhr transparent

Javascript Rund-Uhr

Javascript Canvas-Uhr 1

Flash Mini-Uhren





Javascript Canvas-Uhr 2

Javascript Canvas-Uhr 3

Javascript Canvas-Uhr 4

Code alle Flash Rund-Uhren:

Code für das HTML-Objekt:

[Objekt HTML]

<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="analog-uhr1">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="files/analog-uhr.swf /> /*Pfad anpassen*/
<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=zb_4col.png" />
<embed src="files/analog-uhr.swf" /*Pfad anpassen*/
flashvars=
"h_c=000000&m_c=000000&s_c=ff9900&disc=000000&grafik=images/zb_color.png" /*Pfad anpassen*/
quality=
"high" wmode="transparent" width="200" height="200" name="analog-uhr1" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!-- Veränderung Farbcode ohne Lattenkreuz # voran eingeben -->

Image bei Bunter Flash-Uhr: zb_color.png
Image bei Weißer Flash-Uhr: zb_white.jpg
Image bei Tranp. Flash-Uhr:
zb_trans.png

Code Flash Mini-Uhren:

Code für das HTML-Objekt:

[Objekt HTML]

<embed src="files/mini-uhr.swf"  /* Pfad anpassen */
style=
"background-color:#B30607;  /* Farbe anpassen */
width:70px; height:70px;"
   /* Maße anpassen */
wmode=
"transparent" type="application/x-shockwave-flash">
<br><br><br>
<embed src="files/mini-uhr.swf" /* Pfad anpassen */
style=
"background-color:#5F5F5F;  /* Farbe anpassen */
width:70px; height:70px;"    /* Maße anpassen */
wmode=
"transparent" type="application/x-shockwave-flash">

Code Javascript Rund-Uhr:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.forIE
{ position:absolute; top:0px; left:0; height:10px; width:10px; }
.clock
{ position:absolute; width: 80px; height: 80px; top:100px; left:130px; font-family:Arial;
font-size: 16px; 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 das HTML-Objekt:

[Objekt HTML]

<script type='text/javascript'>
// Grundeinstellungen
ClockHeight=80;  
// musss gleich mit CSS-Class height:
ClockWidth=80;  
// musss gleich mit CSS-Class width:
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>

Code Javascript Canvas Uhren:

Code für den HEAD-Bereich:

[Vor dem /HEAD]

<!--[if IE]><script type="text/javascript" src="files/clocktime-ie.js"></script><![endif]-->
<script type="text/javascript" src="files/clocktime.js"></script>

Code für das HTML-Objekt:

[Objekt HTML]

<canvas class="ClockTime:hw20" style="background-color:transparent;"></canvas>

ID entsprechend anpassen
ID Javascript Canvas-Uhr 1:  
ClockTime:hw21
ID Javascript Canvas-Uhr 2:  ClockTime:hw22
ID Javascript Canvas-Uhr 3:  ClockTime:hw23
ID Javascript Canvas-Uhr 4:  ClockTime:hw24
Hintergrund kann beliebig gewählt werden: background-color:#......

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Stefan http://minisys.org schreibt am 14.06.2015, 15.18 Uhr

    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 werden ClockTime.findAndCreateClocks(); Ansonsten: Tolle Seite, tolle Sammlung aktueller und klassischer Web-Elemente. Vielen lieben Dank dafür!


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 18 Online
 » 136 Heute
 » 872 Woche
 » 5202 Monat
 » 24989 Jahr
 » 271567 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü