Test-Homepage - Datum & Uhrzeit

Eine weitere Uhr, inklusive Datum, als Mausverfolger.

Ihr könnt in diesem Javascript die Farben anpassen, indem ihr einfach den entsprechenden Farbcode (siehe Farbcodes) an der richtigen Stelle (ganz oben im Javascript) eintragt.

<script type='text/javascript'>
<!--
// Farbeinstellungen
dCol='#FF0000';//Farbe Datum
fCol='#000000';//Farbe Ziffernblatt
sCol='Courier New';//Farbe Sekunden
mCol='#FF0000';//Farbe Minuten
hCol='#FF0000';//Farbe Stunden
ClockHeight=50;

ClockWidth=50;
ClockFromMouseY=0;
ClockFromMouseX=110;

//Ab hier nichts mehr ändern!

d=new Array("SONNTAG","MONTAG","DIENSTAG","MITTWOCH","DONNERSTAG","FREITAG","SAMSTAG");
m=new Array("JANUAR","FEBRUAR","MÄRZ","APRIL","MAI","JUNI","JULI","AUGUST","SEPTEMBER","OKTOBER","NOVEMBER","DEZEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.getElementById);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.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}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(e){
ymouse = (e)?e.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (e)?e.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
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;
if (ie){
document.getElementById('Od').style.top=window.document.documentElement.scrollTop+"px";
document.getElementById('Of').style.top=window.document.documentElement.scrollTop+"px";
document.getElementById('Oh').style.top=window.document.documentElement.scrollTop+"px";
document.getElementById('Om').style.top=window.document.documentElement.scrollTop+"px";
document.getElementById('Os').style.top=window.document.documentElement.scrollTop+"px";
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]: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=(ns)?document.layers['nsHours'+i]: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=(ns)?document.layers['nsMinutes'+i]: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=(ns)?document.layers['nsSeconds'+i]: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";
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:document.getElementById('ieDate'+i).style;
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll+"px";
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180)+"px";
 }
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
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 /> <div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/javascripts.html" _fcksavedurl="http://www.kostenlose-javascripts.de/javascripts.html" title="Javascript auf der Homepage" target="_blank">Javascript auf der Homepage</a></div> <br /> <script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id=86"></script>

Javascript auf der Homepage