Une demi-horloge à aiguilles entièrement parametrable

Commenter

Contenu du snippet

Pas besoin de long discours, c'est une horloge à cadran, mais au lieu d'un cadran de 360° celui-ci n'en fait que 180°.

Pratique si vous n'avez pas beaucoup de place pour mettre une horoge à aiguilles classique. Vous pouvez régler la hauteur et la largeur séparément (plus 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">
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=50; //rayon de la hauteur de l'horloge
ClockWidth=70; //rayon de la largeur de l'horloge

Contour='·············';
Contour=Contour.split('');
H='····';
H=H.split('');
M='······';
M=M.split('');
S='······';
S=S.split('');

if (sensRotation == 1) { Face='0 1 2 3 4 5 6 7 8 9 10 11 12'; }
else { Face='12 11 10 9 8 7 6 5 4 3 2 1 0'; }

size=11; //taille de la police de caractère des chiffres
psize=18; //taille de la police de caractère des aiguilles
Face=Face.split(' ');
n=Face.length; 
Split=Math.PI/(n-1); //angle entre chaque chiffre du cadran
HandHeight=ClockHeight/S.length;
HandWidth=ClockWidth/S.length;

document.write('<div id="horloge" style="position:relative">');

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>');

function ClockAndAssign(){
  time = new Date ();
  sec = Math.PI * time.getSeconds()/60;
  sec = sensRotation * sec;
  min = Math.PI * time.getMinutes()/60;
  min = sensRotation * min;
  hrs = Math.PI * ((time.getHours() + time.getMinutes()/60)%12)/12;
  hrs = sensRotation * hrs;

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

  for (i=0; i < n; i++){
    var F=ieFace[i].style;
    F.top=ClockHeight - (ClockHeight+10)*Math.sin(i*Split);
    F.left=ClockWidth - (ClockWidth+10)*Math.cos(i*Split);
  }

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

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

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

  setTimeout('ClockAndAssign()',20);
}

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

Conclusion :


Pour ceux qui souhaitent voir ce que ca donne, une petite image !
Pour le moment ca ne fonctionne que sous Internet Explorer, je n'ai pas encore pris le temps de tester sous Netscape.

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)