begin process at 2012 02 14 09:38:59
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Date & Heure

 > UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE

UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE


 Information sur la source

Note :
9 / 10 - par 2 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Date & Heure Niveau :Expert Date de création :12/02/2004 Date de mise à jour :13/02/2004 17:02:24 Vu :12 304

Auteur : jerms

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <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>
<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.


 Sources du même auteur

CALCUL DU NUMÉRO DE LA SEMAINE
Source avec Zip ALBUM PHOTOS EN JAVASCRIPT
SUPPRIMER LA FRAME DE PUB ET LES POPUPS CHEZ IFRANCE
HORLOGE DÉCADÉCIMALE
TRI DYNAMIQUE DE TABLEAU

 Sources de la même categorie

Source avec Zip CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien
OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand
SAINT DU JOUR par tefa24600
Source avec Zip Source avec une capture NIPCLOCK 1.2 par neep
COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

Commentaires et avis

Commentaire de markachat le 08/03/2004 09:43:03

Joli juste regrettable qu'il ne soit pas compatible Netscape et Mozilla...

Commentaire de jerms le 08/03/2004 17:10:24

Merci, je sais pour netscape, et autre, mais je n'ai ni l'un ni l'autre sur mon PC, et je ne connais pas les differences, ceci dit faudrait que je m'y mette.

Commentaire de LToZ le 05/04/2004 17:20:52

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!

Commentaire de yami_no_ookami le 15/04/2004 16:12:36

niveau expert ???

Commentaire de bamohamed le 14/11/2006 10:45:04

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 .

Commentaire de bamohamed le 14/11/2006 11:06:16

ce qui concerne l'horloge elle est vraiment magnifique :)

Commentaire de yvesguyot le 10/04/2010 10:21:02

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 ?

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales