analog uhr
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bestimmten stelle
fenster
gut aussehende uhr
hintergrund
minutenzeiger
recht
sekundenzeiger
stundenzeiger
uhr
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich hab hier drei M?glichkeiten f?r dich:
M?glichkeit 1:
<SCRIPT LANGUAGE="VBScript">
Dim a
Dim min1
Dim hr1
Dim sec1
'Initializes clock and tells it how to behave, when to start animation, etc
Sub window_onload
a = time
theTimeDate.innerText = now
sec1 = second(a)
min1 = minute(a)
hr1 = hour(a)
if hr1 > 12 then
hr1 = hr1 - 12
end if
call sgSecondHand.Rotate(0,0,sec1*6 - 90)
call sgMinuteHand.Rotate(0,0,min1*6 - 90)
call sgHourHand.Rotate(0,0,hr1*360/12 - 90)
call sgHourHand.Rotate(0,0,int(min1/2))
call seq("Time").Play
end Sub
'Sequencer initilization
Sub Seq_OnInit
Call seq("Time").at(1.000, "SecRot", -1,1.000, 1)
End Sub
'rotates second hand of clock
Sub SecRot
theTimeDate.innerText = now
a = time
sec1 = second(a)
min1 = minute(a)
hr1 = hour(a)
if hr1 > 12 then
hr1 = hr1 - 12
end if
Call sgSecondHand.Rotate(0,0,6)
if sec1 = 0 then
Call sgMinuteHand.Rotate(0,0,6)
if min1 mod 2 = 0 then
call sgHourHand.Rotate(0,0,1)
end if
end if
End Sub
</SCRIPT>
<DIV ID = "MASTERLAYOUT" STYLE="POSITION:relative;WIDTH:300; HEIGHT:260;TOP:80;LEFT:50; background:#ffffff">
<DIV STYLE="POSITION:ABSOLUTE; HEIGHT:60; WIDTH:200; TOP:230; left:50">
<CENTER>
<P id=theTimeDate></P>
</CENTER>
</DIV>
<DIV ID="divTimeText" STYLE="POSITION:ABSOLUTE; WIDTH:202;HEIGHT:202; TOP:0; LEFT:0;z-index:2">
<OBJECT ID="SgNumbers" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE= "POSITION:ABSOLUTE; WIDTH:200; HEIGHT:200; TOP:10; LEFT:50;Z-INDEX:5">
<PARAM NAME="Line0001" VALUE="SetLineColor(0, 0, 0)"> //hier den Farbcode der Zahlen angeben
<PARAM NAME="Line0002" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0004" VALUE="SetFillColor(0,0,0)"> //hier den Farbcode der Zahlen angeben
<PARAM NAME="Line0005" VALUE="SetFont('ARIAL',24,650,0,0,0)">
<PARAM NAME="Line0006" VALUE="Text('.',40,-72,0">
<PARAM NAME="Line0007" VALUE="Text('.',70,-42,0">
<PARAM NAME="Line0008" VALUE="Text('3',80,7,0">
<PARAM NAME="Line0009" VALUE="Text('.',70,45,0">
<PARAM NAME="Line0010" VALUE="Text('.',40,76,0">
<PARAM NAME="Line0011" VALUE="Text('6',-8,90,0">
<PARAM NAME="Line0012" VALUE="Text('.',-47,76,0">
<PARAM NAME="Line0013" VALUE="Text('.',-77,45,0">
<PARAM NAME="Line0014" VALUE="Text('9',-92,7,0">
<PARAM NAME="Line0015" VALUE="Text('.',-77,-42,0">
<PARAM NAME="Line0016" VALUE="Text('.',-47,-72,0">
<PARAM NAME="Line0017" VALUE="Text('12',-14,-76,0">
</OBJECT>
</div>
<OBJECT ID="sgBackground" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE="POSITION:absolute; TOP:10; LEFT:50; WIDTH:200; HEIGHT:200">
<PARAM NAME="Line0001" VALUE="SetLineColor(0, 0, 0)"> //hier den Farbcode der hintergrund angeben
<PARAM NAME="Line0001" VALUE="SetLineStyle(5)">
<PARAM NAME="Line0002" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0004" VALUE="SetGradientFill(0,0,-100,-100,0)">
<PARAM NAME="Line0005" VALUE="Oval(-100,-100,199,199,0)">
</OBJECT>
<DIV ID="divClock" STYLE="POSITION:ABSOLUTE; WIDTH:200; HEIGHT:200; TOP:0; LEFT:0;">
<OBJECT ID="sgSecondHand" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE="POSITION:absolute; TOP:10; LEFT:50; WIDTH:200; HEIGHT:200; Z-INDEX:5">
<PARAM NAME="Line0001" VALUE="SetLineColor(0, 0, 0)"> //hier den Farbcode der sekundenzeiger angeben
<PARAM NAME="Line0002" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,0)"> //hier den Farbcode der sekundenzeiger angeben
<PARAM NAME="Line0004" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0005" VALUE="Rect(0,0,95,0,0)">
</OBJECT>
<OBJECT ID="sgMinuteHand" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE="POSITION:absolute; TOP:10; LEFT:50; WIDTH:200; HEIGHT:200; Z-INDEX:5">
<PARAM NAME="Line0001" VALUE="SetLineColor(0, 0, 0)"> //hier den Farbcode der mintenzeiger angeben
<PARAM NAME="Line0002" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,0)"> //hier den Farbcode der minutenzeiger angeben
<PARAM NAME="Line0004" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0005" VALUE="Rect(0,-1,85,1,0)">
</OBJECT>
<OBJECT ID="sgHourHand" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE="POSITION:ABSOLUTE; TOP:10; LEFT:50; WIDTH:200; HEIGHT:200; Z-INDEX:5">
<PARAM NAME="Line0001" VALUE="SetLineColor(0, 0, 0)"> //hier den Farbcode der stundenzeiger angeben
<PARAM NAME="Line0002" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,0)"> //hier den Farbcode der stundenzeiger angeben
<PARAM NAME="Line0004" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0005" VALUE="Rect(0,-2,70,2,0)">
</OBJECT>
</DIV>
</DIV>
<OBJECT ID="Seq" CLASSID="CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96">
</OBJECT>
<script language="JavaScript">
<!--
if (navigator.appName == "Microsoft Internet Explorer") {
document.write('');
}else{
document.write("<font face='Arial,Helvetica,MS Sans Serif'><center>Dieses Skript l?uft nur mit dem MSIE 4.0!</center></font><br>");
}
// -->
</script>
M?glichkeit 2:
<script language="JavaScript">
<!-- 24/12 Hour Clock
ClockFace=new Image();
ClockFace.src="gfxu/uhr.gif";
milCol='#ffffff'; //24 colour.
civCol='#ffffff'; //12 colour.
dotCol='#ddeefe'; //dot colour.
hCol='#0000ff'; //hours colour.
mCol='#0000ff'; //minutes colour.
sCol='#ff0000'; //seconds colour.
ampmCol='#ddeefe';//am-pm colour.
//Alter nothing below! Alignments will be lost!
ns=(document.layers);
ns6=(document.getElementById&&!document.all);
ie=(document.all);
h=3;
m=4;
s=5;
civ='1 2 3 4 5 6 7 8 9 10 11 12';
civ=civ.split(' ');
mil='13 14 15 16 17 18 19 20 21 22 23 24';
mil=mil.split(' ');
n=civ.length;
ClockHeight=30;
ClockWidth=30;
f24="<font face='Arial' size=1 color="+milCol+">";
f12="<font face='Arial' size=1 color="+civCol+">";
e=360/n;
HandHeight=ClockHeight/4;
HandWidth=ClockWidth/4;
y=0;
x=0;
if (!ns)
document.write('<div id="glass" style="position:absolute"><img src='+ClockFace.src+' height=142 width=142></div>');
else
document.write("<layer name='glass' top=0 left=0><img src="+ClockFace.src+" height=142 width=142></layer>");
if (!ns)
document.write("<div id='disp' style='position:absolute;width:50px;height:20px;text-align:center'> </div>");
else
document.write("<layer name=disp top=0 left=0></layer>");
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="Mil'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f24+mil+'</font></div>');
else
document.write('<layer name="Mil'+i+'" width=15 height=15><center>'+f24+mil+'</font></center></layer>');
}
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="Civ'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f12+civ+'</font></div>');
else
document.write('<layer name="Civ'+i+'" width=15 height=15><center>'+f12+civ+'</font></center></layer>');
}
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="D'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+dotCol+'"></div>');
else
document.write('<layer name="D'+i+'" bgcolor='+dotCol+' width=2 height=2></layer>');
}
for (i=0; i < h; i++){
if (!ns)
document.write('<div id="H'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
else
document.write('<layer name="H'+i+'" bgcolor='+hCol+' width=2 height=2></layer>');
}
for (i=0; i < m; i++){
if (!ns)
document.write('<div id="M'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
else
document.write('<layer name="M'+i+'" bgcolor='+mCol+' width=2 height=2></layer>');
}
for (i=0; i < s; i++){
if (!ns)
document.write('<div id="S'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
else
document.write('<layer name="S'+i+'" bgcolor='+sCol+' width=2 height=2></layer>');
}
function ClockAndAssign(){
var _d=(ns||ie)?'document.':'document.getElementById("';
var _a=(ns||ns6)?'':'all.';
var _n6r=(ns6)?'")':'';
var _s=(ns)?'':'.style';
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;
ampm=(hr>11)?"PM":"AM";
y=(ie)?document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2.4:window.pageYOffset+window.innerHeight-ClockHeight*2.4;
x=(ie)?document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2.4:window.pageXOffset+window.innerWidth-ClockWidth*2.9;
var Dspf=eval(_d+_a+"glass"+_n6r+_s);Dspf.top=y-71;Dspf.left=x-70;
var Dsp=eval(_d+_a+"disp"+_n6r+_s);Dsp.top=y-17;Dsp.left=x-24;
for (i=0; i < s; i++){var d1=eval(_d+_a+"S"+i+_n6r+_s);d1.top=y+(i*HandHeight)*Math.sin(sec);d1.left=x+(i*HandWidth)*Math.cos(sec)}
for (i=0; i < m; i++){var d2=eval(_d+_a+"M"+i+_n6r+_s);d2.top=y+(i*HandHeight)*Math.sin(min);d2.left=x+(i*HandWidth)*Math.cos(min)}
for (i=0; i < h; i++){var d3=eval(_d+_a+"H"+i+_n6r+_s);d3.top=y+(i*HandHeight)*Math.sin(hrs);d3.left=x+(i*HandWidth)*Math.cos(hrs)}
for (i=0; i < n; i++){var d4=eval(_d+_a+"D"+i+_n6r+_s);d4.top=y+ ClockHeight*Math.sin(-1.0471+i*e*Math.PI/180);d4.left=x+ ClockWidth*Math.cos(-1.0471+i*e*Math.PI/180)}
for (i=0; i < n; i++){var d5=eval(_d+_a+"Civ"+i+_n6r+_s);d5.top=y-6+ClockHeight*1.4*Math.sin(-1.0471+i*e*Math.PI/180);d5.left=x-6+ClockWidth*1.4*Math.cos(-1.0471+i*e*Math.PI/180)}
for (i=0; i < n; i++){var d6=eval(_d+_a+"Mil"+i+_n6r+_s);d6.top=y-6+ClockHeight*1.9*Math.sin(-1.0471+i*e*Math.PI/180);d6.left=x-6+ClockWidth*1.9*Math.cos(-1.0471+i*e*Math.PI/180)}
setTimeout('ClockAndAssign()',100);
if (ie)disp.innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
if (ns){
document.disp.document.open();
document.disp.document.write('<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>');
document.disp.document.close();
}
}
function aorp(){
if (ns6)
document.getElementById("disp").innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
setTimeout('aorp()',60000);
}
ClockAndAssign();
if (ns6)aorp();
//-->
</script>
M?glichkeit die 3.:
<script language="JavaScript">
<!-- Clock
civCol='#777770'; //12 colour.
dotCol='#777770'; //dot colour.
hCol='#fffff0'; //hours colour.
mCol='#fffff0'; //minutes colour.
sCol='#00ff00'; //seconds colour.
ampmCol='#444440';//am-pm colour.
//Alter nothing below! Alignments will be lost!
ns=(document.layers);
ns6=(document.getElementById&&!document.all);
ie=(document.all);
h=3;
m=4;
s=5;
civ='1 2 3 4 5 6 7 8 9 10 11 12';
civ=civ.split(' ');
n=civ.length;
ClockHeight=30;
ClockWidth=30;
f12="<font face='Arial' size=1 color="+civCol+">";
e=360/n;
HandHeight=ClockHeight/4;
HandWidth=ClockWidth/4;
y=0;
x=0;
if (!ns)
document.write("<div id='disp' style='position:absolute;width:50px;height:20px;text-align:center'> </div>");
else
document.write("<layer name=disp top=0 left=0></layer>");
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="Civ'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f12+civ+'</font></div>');
else
document.write('<layer name="Civ'+i+'" width=15 height=15><center>'+f12+civ+'</font></center></layer>');
}
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="D'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+dotCol+'"></div>');
else
document.write('<layer name="D'+i+'" bgcolor='+dotCol+' width=2 height=2></layer>');
}
for (i=0; i < h; i++){
if (!ns)
document.write('<div id="H'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
else
document.write('<layer name="H'+i+'" bgcolor='+hCol+' width=2 height=2></layer>');
}
for (i=0; i < m; i++){
if (!ns)
document.write('<div id="M'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
else
document.write('<layer name="M'+i+'" bgcolor='+mCol+' width=2 height=2></layer>');
}
for (i=0; i < s; i++){
if (!ns)
document.write('<div id="S'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
else
document.write('<layer name="S'+i+'" bgcolor='+sCol+' width=2 height=2></layer>');
}
function ClockAndAssign(){
var _d=(ns||ie)?'document.':'document.getElementById("';
var _a=(ns||ns6)?'':'all.';
var _n6r=(ns6)?'")':'';
var _s=(ns)?'':'.style';
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;
ampm=(hr>11)?"PM":"AM";
y=(ie)?document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2:window.pageYOffset+window.innerHeight-ClockHeight*2;
x=(ie)?document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2:window.pageXOffset+window.innerWidth-ClockWidth*2.4;
var Dsp=eval(_d+_a+"disp"+_n6r+_s);Dsp.top=y-17;Dsp.left=x-24;
for (i=0; i < s; i++){var d1=eval(_d+_a+"S"+i+_n6r+_s);d1.top=y+(i*HandHeight)*Math.sin(sec);d1.left=x+(i*HandWidth)*Math.cos(sec)}
for (i=0; i < m; i++){var d2=eval(_d+_a+"M"+i+_n6r+_s);d2.top=y+(i*HandHeight)*Math.sin(min);d2.left=x+(i*HandWidth)*Math.cos(min)}
for (i=0; i < h; i++){var d3=eval(_d+_a+"H"+i+_n6r+_s);d3.top=y+(i*HandHeight)*Math.sin(hrs);d3.left=x+(i*HandWidth)*Math.cos(hrs)}
for (i=0; i < n; i++){var d4=eval(_d+_a+"D"+i+_n6r+_s);d4.top=y+ ClockHeight*Math.sin(-1.0471+i*e*Math.PI/180);d4.left=x+ ClockWidth*Math.cos(-1.0471+i*e*Math.PI/180)}
for (i=0; i < n; i++){var d5=eval(_d+_a+"Civ"+i+_n6r+_s);d5.top=y-6+ClockHeight*1.4*Math.sin(-1.0471+i*e*Math.PI/180);d5.left=x-6+ClockWidth*1.4*Math.cos(-1.0471+i*e*Math.PI/180)}
setTimeout('ClockAndAssign()',100);
if (ie)disp.innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
if (ns){
document.disp.document.open();
document.disp.document.write('<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>');
document.disp.document.close();
}
}
function aorp(){
if (ns6)
document.getElementById("disp").innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
setTimeout('aorp()',60000);
}
ClockAndAssign();
if (ns6)aorp();
//-->
</script>
M?glichkeit 1 ist eine Analoguht, die an einer bestimmten stelle plaziert wird und da auch bleibt.
M?glichkeit 2 und 3 sind Uhren, im Analogformat, die immer rechts unten im Fenster sind. das bedeutet, wenn man runterscrollt, das die uhr auch mit runter geht. Ich w?rd mich zwischen den beiden aber f?r M?glichkeit 2 entscheiden.
Hoffe, das ich helfen konnte
MfG
Kafke -
Jo, danke...das hilft mit schon ein wenig weiter!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage