Horloge décadécimale

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 368 fois - Téléchargée 27 fois

Contenu du snippet

C'est une horloge à cadran, mais basée sur le système décimale (suite à une demande de Selkys).
1 jour = 10 heures.
1 heure = 100 minutes.
1 minute = 100 secondes.
1 seconde = 1 seconde (ca a l'air con mais ca a sont importance, sinon les jours n'aurait plus forcément la même longueur !)

Vous pouvez régler la hauteur et la largeur de l'horloge séparément (en plus du paramétrage de la taille de police, de la couleur, du sens de rotation, ...).

Source / Exemple :


<html>
<style>
 div { position:absolute;font-family:Arial;text-align:center;font-weight:bold }
</style>

<script language="JavaScript">
//horloge base 100
sensRotation = 1; //sens de rotation de l'horloge (1 sans normal / -1 sans inverse)
fCol='000000'; //face colour.
sCol='FF6701'; //seconds colour.
mCol='0000FF'; //minutes colour.
hCol='FF0000'; //hours colour.
cCol='000000'; //couleur du contour.
ClockHeight=100; //rayon de la hauteur de l'horloge
ClockWidth=100; //rayon de la largeur de l'horloge
ClockFromMouseY=0;
ClockFromMouseX=0;

Contour='°°°°°°°°°°';
Contour=Contour.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'; }
else { Face='9 8 7 6 5 4 3 2 1 10'; }

size=11; //taille de la police de caractère des chiffres
psize=18; //taille de la police de caractère des aiguilles
speed=0.4; //vitesse pour que l'horloge se reconsititue
Face=Face.split(' ');
n=Face.length; 
ymouse=0;
xmouse=0;
Split=2*Math.PI/n; //angle entre chaque chiffre du cadran
HandHeight=ClockHeight/S.length;
HandWidth=ClockWidth/S.length;

y=new Array();x=new Array();Y=new Array();X=new Array();
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i < n; i++)
  { y[i]=0;x[i]=0;Y[i]=0;X[i]=0 }

for (i=0; i < Contour.length; i++)
  document.write('<div id="ieContour" style="font-size:'+psize+'px;color:'+cCol+'">'+Contour[i]+'</div>');

for (i=0; i < n; i++)
  document.write('<div id="ieFace" style="font-size:'+size+'px;color:'+fCol+'">'+Face[i]+'</div>');

for (i=0; i < H.length; i++)
  document.write('<div id="ieHours" style="font-size:'+psize+'px;color:'+hCol+'">'+H[i]+'</div>');

for (i=0; i < M.length; i++)
  document.write('<div id="ieMinutes" style="font-size:'+psize+'px;color:'+mCol+'">'+M[i]+'</div>');

for (i=0; i < S.length; i++)
  document.write('<div id="ieSeconds" style="font-size:'+psize+'px;color:'+sCol+'">'+S[i]+'</div>');

document.write('<div id="date" style="position:absolute;top:10px;left:10px">&nbsp;</div">');

function Mouse(evnt){
  ymouse = event.y+ClockFromMouseY;
  xmouse = event.x+ClockFromMouseX;
}

document.onmousemove=Mouse;

function ClockAndAssign(){
  time = new Date ();
  nbsec = time.getHours()*3600 + time.getMinutes()*60 + time.getSeconds();
  nbsec10 = parseInt(nbsec*125/108);
  h10 = parseInt(nbsec10/10000);
  m10 = parseInt((nbsec10-h10*10000)/100);
  s10 = nbsec10-h10*10000-m10*100;
  document.getElementById("date").innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() + " ==> " + h10+":"+m10+":"+s10;
  sec = 2*Math.PI * s10/100;
  sec = sensRotation * sec;
  min = 2*Math.PI * m10/100;
  min = sensRotation * min;
  hrs = 2*Math.PI * (h10 + m10/100)/10;
  hrs = sensRotation * hrs;

  for (i=0; i < Contour.length; i++){
    var C=ieContour[i].style;
    C.top=y[i] + ClockHeight - ClockHeight*Math.sin(Math.PI/2 + i*2*Math.PI/Contour.length);
    C.left=x[i] + ClockWidth - ClockWidth*Math.cos(Math.PI/2 + i*2*Math.PI/Contour.length);
  }

  for (i=n-1; i >= 0; i--){
    var F=ieFace[i].style;
    F.top=y[i] + ClockHeight - (ClockHeight+10)*Math.sin(Math.PI/2 + (i-(n-1))*Split);
    F.left=x[i] + ClockWidth - (ClockWidth+10)*Math.cos(Math.PI/2 + (i-(n-1))*Split);
  }

  for (i=0; i < H.length; i++){
    var HL=ieHours[i].style;
    HL.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + hrs));
    HL.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + hrs));
  }

  for (i=0; i < M.length; i++){
    var ML=ieMinutes[i].style;
    ML.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + min));
    ML.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + min));
  }

  for (i=0; i < S.length; i++){
    var SL=ieSeconds[i].style;
    SL.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + sec));
    SL.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + sec));
  }
}

function Delay(){
  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);
}

window.onload=Delay;
</script>
</html>

Conclusion :


Pour le moment c'est uniquement du Internet Explorer.....
J'ai également mis la correspondance en numérique entre notre horloge (24h) et celle ci (10h).

A voir également

Ajouter un commentaire

Commentaire

cs_DomJ
Messages postés
140
Date d'inscription
dimanche 4 décembre 2005
Statut
Membre
Dernière intervention
3 décembre 2013
1 -
des fois, il passe 2 secondes, ex: 97,99,0

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.