Une demi-horloge à aiguilles entièrement parametrable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 642 fois - Téléchargée 26 fois

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

Ajouter un commentaire

Commentaires

yvesguyot
Messages postés
5
Date d'inscription
dimanche 3 août 2008
Statut
Membre
Dernière intervention
10 avril 2010
-
Bonjour,

Très bien cette horloge.
Me permettez vous de le copier et le modifier en vous citant (vous et Javascript.fr) ?

Bonne journée ?
bamohamed
Messages postés
4
Date d'inscription
mardi 31 octobre 2006
Statut
Membre
Dernière intervention
21 mars 2007
-
ce qui concerne l'horloge elle est vraiment magnifique :)
bamohamed
Messages postés
4
Date d'inscription
mardi 31 octobre 2006
Statut
Membre
Dernière intervention
21 mars 2007
-
salut
j'ai besoin d'un script qui fait afficher 3 ou 4 logos situés dans un repertoire prédéfinis qui contiens une liste des logos des partenaires qui sont ajouté dynamiquement.. donc puisque la liste est longue des logos j'ai besoin d'afficher aléatoirement des logos a chaque fois il changes par exemple chaque intervale de temp . merci d'avance . bamohamed .
yami_no_ookami
Messages postés
165
Date d'inscription
jeudi 29 janvier 2004
Statut
Membre
Dernière intervention
16 octobre 2005
2 -
niveau expert ???
LToZ
Messages postés
16
Date d'inscription
jeudi 25 mars 2004
Statut
Membre
Dernière intervention
14 avril 2004
-
Purement génial. Pour l'amiliorer tout ce que je vois ce serait de mettre l'affichage des minutes. Un peu comme les KM/H et les MPH sur les cadrans de vitesse nord américain. Autrement le concepte est vraiment fort!

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.