Horloge à aiguilles DHTML

Horloge à aiguille dynamique

Il vous faudra aussi enrgistrer l'image point.gif dans le même fichier que la page.

Dans la partie HEAD :

var H=new Object;
var pi=3.141592654;
function AffHorloge() {
	var nb=H.nbpoint; var X=H.X; var Y=H.Y; var x; var y; var r=H.rayon;
	var d=new Date();
	var min=d.getMinutes();
	var heure=d.getHours()+min/60;
	var sec=d.getSeconds();
	var angleheure=heure*2*pi/12-pi/2;	var ah=""; var nsh="";
	for (var i=0;i<=nb;i++) {
		x=Math.floor(i/nb*0.75*(r+1.5)*Math.cos(angleheure));
		y=Math.floor(i/nb*0.75*(r+1.5)*Math.sin(angleheure));
		ah+="<DIV style='font-size:10px;position:absolute;left:"+x+";top:"+y+"'><IMG src='point.gif' width=3 height=3></DIV>"
		nsh+="<LAYER left='"+(x)+"' top='"+(y)+"'><IMG src='point.gif' width=3 height=3></LAYER>";
	}

var angleminute=min*2*pi/60-pi/2;	var am=""; var nsm="";
	for (var i=0;i<=nb;i++) {
		x=Math.floor(i/nb*(r+1.5)*Math.cos(angleminute));
		y=Math.floor(i/nb*(r+1.5)*Math.sin(angleminute));
		am+="<DIV style='font-size:10px;position:absolute;left:"+x+";top:"+y+"'><IMG src='point.gif' width=3 height=3></DIV>"
		nsm+="<LAYER left='"+(x)+"' top='"+(y)+"'><IMG src='point.gif' width=3 height=3></LAYER>";
	}

var angleseconde=sec*2*pi/60-pi/2;	var as=""; var nss="";
	for (var i=1;i<=nb;i++) {
		x=Math.floor(i/nb*1.08*(r+1)*Math.cos(angleseconde));
		y=Math.floor(i/nb*1.08*(r+1)*Math.sin(angleseconde));
		as+="<DIV style='font-size:10px;position:absolute;left:"+x+";top:"+y+"'><IMG src='point.gif' width=2 height=2></DIV>"
		nss+="<LAYER left='"+(x)+"' top='"+(y)+"'><IMG src='point.gif' width=2 height=2></LAYER>";
	}

if (document.layers) {
		document.layers["aheure"].document.write(nsh+nsm+nss);
		document.layers["aheure"].document.close();
	}
	if (document.all) {
		document.all.aheure.innerHTML=ah+am+as;
	}
	setTimeout("AffHorloge()",1000);
}

function InitHorloge(X,Y,nbpoint,rayon) {
	H.X=X;H.Y=Y;H.nbpoint=nbpoint;H.rayon=rayon;

var angle=0; var x; var y;
	if (document.all) {
		var cadran="<DIV id='aheure' style='position:absolute;left:0;top:0;visibility:show;'>aiguilles</DIV>";

for (var i=1;i<=12;i++) {
			angle=(i*2*pi/12-pi/2);
			x=Math.floor((H.rayon+10)*Math.cos(angle))-5;
			y=Math.floor((H.rayon+10)*Math.sin(angle))-4;
			cadran+="<DIV style='font-size:8px;position:absolute;left:"+x+";top:"+y+";width:10'><CENTER>"+i+"</CENTER></DIV>"
		}

document.write("<DIV id='horloge' style='position:absolute;top:"+Y+";left:"+X+";visibility:show'>"+cadran+"</DIV>");
		AffHorloge();
	}
	if (document.layers) {
		var cadran="";

for (var i=1;i<=12;i++) {
			angle=(i*2*pi/12-pi/2);
			x=Math.floor((H.rayon+10)*Math.cos(angle))-5;
			y=Math.floor((H.rayon+10)*Math.sin(angle))-4;
			cadran+="<LAYER left='"+(X+x)+"' top='"+(Y+y)+"' width=10 visibility=show><CENTER><FONT size=1>"+i+"</FONT></CENTER></LAYER>"
		}
		
		cadran+="<LAYER name='aheure' left='"+X+"' top='"+Y+"' visibility=show></LAYER>";
		document.write(cadran);
		setTimeout('AffHorloge()',200);
	}
}
</SCRIPT>

Dans la partie BODY :

Retour