Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 24
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Analog klocka

Exempel





Kod


<script type="text/javascript">
clocksize=30;      // Radie på urtavla
hourptrsize=20;    // Längd på timpekare
minptrsize=30;     // Längd på minutpekare
secptrsize=30;     // Längd på sekundpekare

// Ändra inte rader nedan om du är osäker på vad de gör
clockposX=30;     // X-position för klockan
clockposY=30;     // Y-position för klockan
document.write('<div style="position:relative;">');
for(n=1;n<=12;n++){
        document.write('<span id="kl'+n+'" style="position:absolute;background-color:black;top:-10px;left:-10px;width:2px;height:2px;"><img src="images/spacer.gif" width="1" height="1"></span>');
        document.getElementById("kl"+n).style.top=parseInt(Math.cos((30*n)*Math.PI/180)*clocksize+clockposY)+"px";
        document.getElementById("kl"+n).style.left=parseInt(Math.sin((30*n)*Math.PI/180)*clocksize+clockposX)+"px";
}
for(n=1;n<=5;n++){
        document.write('<span id="secpekare'+n+'" style="position:absolute;background-color:gray;top:-10px;left:-10px;width:2px;height:2px;"><img src="images/spacer.gif" width="2" height="2"></span>');
}
for(n=1;n<=5;n++){
        document.write('<span id="minpekare'+n+'" style="position:absolute;background-color:black;top:-10px;left:-10px;width:2px;height:2px;"><img src="images/spacer.gif" width="2" height="2"></span>');
}
for(n=0;n<=5;n++){
        document.write('<span id="timpekare'+n+'" style="position:absolute;background-color:black;top:-10px;left:-10px;width:3px;height:3px;"><img src="images/spacer.gif" width="2" height="2"></span>');
}
document.write('</div>');
function clockupdate(){
	var secVinkel=new Date().getSeconds()*6;
	for(n=1;n<=5;n++){
	        document.getElementById("secpekare"+n).style.top=parseInt(-Math.cos(secVinkel*Math.PI/180)*(secptrsize/5*n)+clockposY)+"px";
	        document.getElementById("secpekare"+n).style.left=parseInt(Math.sin(secVinkel*Math.PI/180)*(secptrsize/5*n)+clockposX)+"px";
	}
	var minVinkel=new Date().getMinutes()*6;
	for(n=1;n<=5;n++){
	        document.getElementById("minpekare"+n).style.top=parseInt(-Math.cos(minVinkel*Math.PI/180)*(minptrsize/5*n)+clockposY)+"px";
	        document.getElementById("minpekare"+n).style.left=parseInt(Math.sin(minVinkel*Math.PI/180)*(minptrsize/5*n)+clockposX)+"px";
	}
	var timVinkel=(new Date().getHours()+new Date().getMinutes()/60)*30;
	for(n=0;n<=5;n++){
	        document.getElementById("timpekare"+n).style.top=parseInt(-Math.cos(timVinkel*Math.PI/180)*(hourptrsize/5*n)+clockposY)+"px";
	        document.getElementById("timpekare"+n).style.left=parseInt(Math.sin(timVinkel*Math.PI/180)*(hourptrsize/5*n)+clockposX)+"px";
	}
}
clockupdate(); setInterval("clockupdate()",1000);
</script>
<br/>
<br/>
<br/>
<br/>


,