Horloge a aiguilles parametrable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 23 728 fois - Téléchargée 28 fois

Contenu du snippet

Une horloge qui siut votre curseur, et qu'on peut parametrer. La couleur, la taille, et surtout (!!!!) le sens de rotation !

quel interet ? aucun, juste pour rire. le code n'est pas de moi, j'ai juste fait en sorte de pouvoir faire tourner les aiguilles dans l'autre sens. Comme si on lisait l'heure dans un miroir...

Source / Exemple :


<script language="JavaScript">
sensRotation = -1;//sens de rotation de l'horloge (1 sans normal / -1 sans inverse)
dCol='0000FF';//date colour.
fCol='7E0B8F';//face colour.
sCol='AB0B1E';//seconds colour.
mCol='696969';//minutes colour.
hCol='696969';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=-ClockHeight-20;
ClockFromMouseX=-ClockWidth-20;

d=new Array("DIMANCHE","LUNDI","MARDI","MERCREDI","JEUDI","VENDREDI","SAMEDI");
m=new Array("JANVIER","FEVRIER","MARS","AVRIL","MAI","JUIN","JUILLET","AOUT","SEPTEMBRE","OCTOBRE","NOVEMBRE","DECEMBRE");
date=new Date();
day=date.getDate();
year=date.getYear();
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year+".";
D=TodaysDate.split('');
H='•••';
H=H.split('');
M='••••';
M=M.split('');
S='·····';
S=S.split('');
if (sensRotation == 1) { Face='1 2 3 4 5 6 7 8 9 10 11 12'; }
else { Face='11 10 9 8 7 6 5 4 3 2 1 12'; }
font='Arial';
size=1;
speed=0.4;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length; 
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
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}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" 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:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" 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:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" 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:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" 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>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
sec = sensRotation * sec;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
min = sensRotation * min;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
hrs = sensRotation * hrs;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style; 
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*(sensRotation*Math.sin(hrs))+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*(sensRotation*Math.cos(hrs));
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*(sensRotation*Math.sin(min))+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*(sensRotation*Math.cos(min));
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*(sensRotation*Math.sin(sec))+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*(sensRotation*Math.cos(sec));
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style; 
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 }
currStep-=step;
}

function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
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);
}
if (ns||ie)window.onload=Delay;
</script>

Conclusion :


amusez vous bien !

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
mercredi 7 avril 2010
Statut
Membre
Dernière intervention
7 avril 2010

ou est le code html??????????????
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

t'as essayé sur quel navigateur ?
Messages postés
16
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
14 janvier 2010

Ce Script ne marche pas chez moi :\
J'ai essayé de la mettre dans , résultat rien ne se passe. Donc je l'ai mis dans <head> et rien ne se passe non plus.
Quelqu'un saurait pourquoi ?
Messages postés
10
Date d'inscription
jeudi 18 avril 2002
Statut
Membre
Dernière intervention
1 juillet 2003

je suis tout a fait d'accord ce script est magnifique autant sur le résultat ke sur le code source
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

C'est bien au moins je suis tombé sur quelqu'un de pas borné ;)
Je ferai plus gaffe la prochaine fois, ca marche.

Mais juste pour dire, j'ai même pas modifier les couleurs des aiguilles et des cadrans (ni a cacher que c'était pas de moi)...

Toujours est-il que j'ai été impressionné par la fluidité et l'estétique du script.
En tout cas merci pour l'info c'est toujours bon de savoir d'ou proviennent les choses.

A+
Jerm's
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.