Horloge a aiguilles parametrable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 263 fois - Téléchargée 29 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
taheer121 Messages postés 1 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 7 avril 2010
7 avril 2010 à 18:59
ou est le code html??????????????
cs_jerms Messages postés 115 Date d'inscription jeudi 8 mai 2003 Statut Membre Dernière intervention 3 janvier 2016
1 avril 2009 à 15:52
t'as essayé sur quel navigateur ?
Skydoo Messages postés 16 Date d'inscription vendredi 13 juin 2008 Statut Membre Dernière intervention 14 janvier 2010
28 mars 2009 à 02:05
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 ?
cs_fortin Messages postés 10 Date d'inscription jeudi 18 avril 2002 Statut Membre Dernière intervention 1 juillet 2003
1 juil. 2003 à 21:56
je suis tout a fait d'accord ce script est magnifique autant sur le résultat ke sur le code source
cs_jerms Messages postés 115 Date d'inscription jeudi 8 mai 2003 Statut Membre Dernière intervention 3 janvier 2016
1 juil. 2003 à 21:14
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.