JavaScript Standard Scroll Clock

Sample

The Script

<style type="text/css">
div.angk, div.hour, div.min, div.det
{
position:absolute;
}
div.hour, div.min, div.det
{
width:2px;
height:2px;
font-size:2px;
}
div.angk
{
width:30px;
height:30px;
font-family:arial,verdana,sans-serif;
font-size:10px;
color:#000000;
text-align:center;
padding-top:10px
}
div.min
{
background:#0000FF;
}
div.hour
{
background:#000000;
}
div.det
{
background:#FF0000;
}
</style>

<div style="width:120px;height:100px;position:relative;left:58px;top:50px">

 <div id="angk1" class="angk">1</div>
 <div id="angk2" class="angk">2</div>
 <div id="angk3" class="angk">3</div>
 <div id="angk4" class="angk">4</div>
 <div id="angk5" class="angk">5</div>
 <div id="angk6" class="angk">6</div>

 <div id="angk7" class="angk">7</div>
 <div id="angk8" class="angk">8</div>
 <div id="angk9" class="angk">9</div>
 <div id="angk10" class="angk">10</div>
 <div id="angk11" class="angk">11</div>
 <div id="angk12" class="angk">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="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="det1" class="det"></div>
 <div id="det2" class="det"></div>
 <div id="det3" class="det"></div>
 <div id="det4" class="det"></div>
 <div id="det5" class="det"></div>
 <div id="det6" class="det"></div>
</div>



<script type="text/javascript">
<!-- Standard Scroll Clock
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=8;
var Xbase=8;
var dots=12;

function jam(){
var waktu=new Date ();
var dets=waktu.getSeconds();
var det=-1.57 + Math.PI * dets/30;
var mins=waktu.getMinutes();
var min=-1.57 + Math.PI * mins/30;
var hr=waktu.getHours();
var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(waktu.getMinutes())/360;
for (i=0; i < dots; ++i){
document.getElementById("angk" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";
document.getElementById("angk" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";
}
for (i=0; i < S.length; i++){
document.getElementById("det" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(det).toString() + "px";
document.getElementById("det" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(det).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";
} 
setTimeout('jam()',50);
}

jam();
//-->
</script>