Horloge décadécimale

Commenter

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

S'inscrire maintenant

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.

Du même auteur (cs_jerms)