Datum & Uhrzeit 1

Dieses Javascript liefert einen sehr interessanten Effekt:

Der Mausverfolger zieht eine analog aussehende Uhr hinter der Maus her. Dabei drehen sich das Datum und der Wochentag aussen um die Uhr. Die Zeiger werden dabei in Echtzeit aktualisiert und der Besucher eurer Homepage sieht immer wie spät es ist, ohne das der Mausverfolger dabei stört, wenn er auf eurer Homepage surft.

Viel Spass damit 🙂

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- dCol='000000';//Farbe Daten fCol='000000';//Farbe Ziffernblatt sCol='000000';//Farbe Sekunden mCol='000000';//Farbe Minuten hCol='000000';//Farbe Stunden ClockHeight=40; ClockWidth=40; ClockFromMouseY=0; ClockFromMouseX=100; //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+'px;width:'+a+'px;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+'px;width:'+a+'px;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 /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/mausverfolger/datum-und-uhrzeit-1/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript" src="https://www.kostenlose-javascripts.de/startScript.php?id=86"></script> <!-- präsentiert von kostenlose-javascripts.de -->