CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 06:40:16

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Date & Heure

> UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE

UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE

Information sur la source

Note :

9,00 / 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 :10 353

Auteur : jerms

Ecrire un message privé

Commentaire sur cette source (6)

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

ALBUM PHOTOS EN JAVASCRIPT

SUPPRIMER LA FRAME DE PUB ET LES POPUPS CHEZ IFRANCE

HORLOGE DÉCADÉCIMALE

TRI DYNAMIQUE DE TABLEAU

Toutes les sources de jerms

Sources de la même categorie

CHRONOMÈTRE AMÉLIORÉ par Kolosta

SLEEP() SANS BOUCLE D'ATTENTE CONSOMMATRICE par Phildepantin

AFFICHAGE DE L'HEURE ET DU FUSEAU HORAIRE (TIMEZONE) SUR LA ... par navylav2

HORLOGE TRIPLE AFFICHAGE AU FORMAT AM/PM/24H/DST par sofiane1234

HORLOGE NUMÉRIQUE EN JAVASCRIPT, COMPATIBLE IE ET FF par bad_dark_spirit

Toutes les sources de la catégorie Date & Heure

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 :)

Ajouter un commentaire

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5