javascript-uhr.php

Quell Code

<div id="alles">
  <div id="tableuhr">
    <div id="dig1" class="dig">1</div>
    <div id="dig2" class="dig">2</div>
    <div id="dig3" class="dig">3</div>
    <div id="dig4" class="dig">4</div>
    <div id="dig5" class="dig">5</div>
    <div id="dig6" class="dig">6</div>
    <div id="dig7" class="dig">7</div>
    <div id="dig8" class="dig">8</div>
    <div id="dig9" class="dig">9</div> 
    <div id="dig10" class="dig" style="left:100px;">10</div>  
    <div id="dig11" class="dig">11</div> 
    <div id="dig12" class="dig">12</div> 
    <div id="hour1" class="hour"></div>
    <div id="hour2" class="hour"></div>
    <div id="hour3" class="hour"></div>
    <div id="hour4" class="hour"></div>
    <div id="hour5" class="hour"></div>
    <div id="hour6" class="hour"></div>
    <div id="hour7" class="hour"></div>
    <div id="hour8" class="hour"></div>
    <div id="min1" class="min"></div>
    <div id="min2" class="min"></div>
    <div id="min3" class="min"></div>
    <div id="min4" class="min"></div>
    <div id="min5" class="min"></div>
    <div id="min6" class="min"></div>
    <div id="min7" class="min"></div>
    <div id="min8" class="min"></div>
    <div id="min9" class="min"></div>
    <div id="min10" class="min"></div>
    <div id="min11" class="min"></div>
    <div id="sec1" class="sec"></div>
    <div id="sec2" class="sec"></div>
    <div id="sec3" class="sec"></div>
    <div id="sec4" class="sec"></div>
    <div id="sec5" class="sec"></div>
    <div id="sec6" class="sec"></div>
    <div id="sec7" class="sec"></div>
    <div id="sec8" class="sec"></div>
    <div id="sec9" class="sec"></div>
    <div id="sec10" class="sec"></div>
    <div id="sec11" class="sec"></div>
    <div id="sec12" class="sec"></div>
    <div id="sec13" class="sec"></div>
    <div id="sec14" class="sec"></div>
    <div id="sec15" class="sec"></div>
  </div>
 </div>
<script>

var H='........';
var H=H.split('');
var M='...........';
var M=M.split('');
var S='...............';
var S=S.split('');
var Ypos=0;
var Xpos=0;
var Ybase=20;
var Xbase=20;
var dots=12;
clock()
function clock(){
var time=new Date ();
var secs=time.getSeconds();
var sec=-1.57 + Math.PI * secs/30;
var mins=time.getMinutes();
var min=-1.57 + Math.PI * mins/30;
var hr=time.getHours();
var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
for (i=0; i < 12; ++i){
  if(i>=9){
  document.getElementById("dig" + (i+1)).style.top=0-55+260*Math.sin(-0.49+dots+i/1.9).toString() + "px";
document.getElementById("dig" + (i+1)).style.left=0-64+260*Math.cos(-0.49+dots+i/1.9).toString() + "px";  
  }else{
document.getElementById("dig" + (i+1)).style.top=0-55+260*Math.sin(-0.49+dots+i/1.9).toString() + "px";
document.getElementById("dig" + (i+1)).style.left=0-24+260*Math.cos(-0.49+dots+i/1.9).toString() + "px";
}
}
for (i=0; i < S.length; i++){
document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px";
document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px";
}
for (i=0; i < M.length; i++){
document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";
document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";
}
for (i=0; i < H.length; i++){
document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";
document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";
} 
}
 setInterval(function(){clock()}, 1000);
</script>