Dieses Javascript fügt auf eurer Homepage eine analoge Uhr mit römischem Ziffernblatt ein. Dabei werden nur die Ziffern 3, 6, 9 und 12 als römische Ziffern dargestellt. Die restlichen Positionen werden in dem Javascript lediglich als Punkte angezeigt.

Die Farbe der Zeiger und des Ziffernblattes könnt ihr dabei verstellen. Die Farbcodes findet ihr auf unserer Unterseite Farbcodes.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // Farbeinstellungen fCol='#000000';//Farbe Ziffernblatt sCol='Courier New';//Farbe Sekunden mCol='#FF0000';//Farbe Minuten hCol='#FF0000';//Farbe Stunden ClockHeight=50; ClockWidth=50; //Ab hier nichts mehr ändern! date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); Face='. . III . . VI . . IX . . XII'; font='Arial'; size=1; speed=0.6; 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>"; Split=360/n; 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;} if (ie){ document.write('<div id="Of" style="position:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><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:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><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:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><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:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><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>') } 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 /> <!-- BITTE BEACHTEN: Der folgende Link darf nicht entfernt oder geändert werden --> <div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/handy-prepaid-vergleich.html" title="Prepaid Vergleich" target="_blank">Prepaid Vergleich</a></div> <br /> <script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id=471"></script> <!-- präsentiert von kostenlose-javascripts.de -->