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

Ce site au démarrage

begin process at 2012 02 14 09:38:59

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

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

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

NIPCLOCK 1.2 par neep

COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

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

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

Derniers Blogs

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System