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

Ce site au démarrage

begin process at 2012 05 28 10:31:15

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

HORLOGE DÉCADÉCIMALE

Information sur la source

Note :

10,00 / 10

Catégorie :Date & Heure Niveau :Expert Date de création :12/02/2004 Vu :12 102

Auteur : jerms

Ecrire un message privé

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

C'est une horloge à cadran, mais basée sur le système décimale (suite à une demande de Selkys).
1 jour = 10 heures.
1 heure = 100 minutes.
1 minute = 100 secondes.
1 seconde = 1 seconde (ca a l'air con mais ca a sont importance, sinon les jours n'aurait plus forcément la même longueur !)

Vous pouvez régler la hauteur et la largeur de l'horloge séparément (en plus du 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">
//horloge base 100
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=100; //rayon de la hauteur de l'horloge
ClockWidth=100; //rayon de la largeur de l'horloge
ClockFromMouseY=0;
ClockFromMouseX=0;
Contour='°°°°°°°°°°';
Contour=Contour.split('');
H='···';
H=H.split('');
M='·····';
M=M.split('');
S='······';
S=S.split('');
if (sensRotation == 1) { Face='1 2 3 4 5 6 7 8 9 10'; }
else { Face='9 8 7 6 5 4 3 2 1 10'; }
size=11; //taille de la police de caractère des chiffres
psize=18; //taille de la police de caractère des aiguilles
speed=0.4; //vitesse pour que l'horloge se reconsititue
Face=Face.split(' ');
n=Face.length;
ymouse=0;
xmouse=0;
Split=2*Math.PI/n; //angle entre chaque chiffre du cadran
HandHeight=ClockHeight/S.length;
HandWidth=ClockWidth/S.length;
y=new Array();x=new Array();Y=new Array();X=new Array();
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < n; i++)
{ y[i]=0;x[i]=0;Y[i]=0;X[i]=0 }
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 id="date" style="position:absolute;top:10px;left:10px"> </div">');
function Mouse(evnt){
ymouse = event.y+ClockFromMouseY;
xmouse = event.x+ClockFromMouseX;
}
document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
nbsec = time.getHours()*3600 + time.getMinutes()*60 + time.getSeconds();
nbsec10 = parseInt(nbsec*125/108);
h10 = parseInt(nbsec10/10000);
m10 = parseInt((nbsec10-h10*10000)/100);
s10 = nbsec10-h10*10000-m10*100;
document.getElementById("date").innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() + " ==> " + h10+":"+m10+":"+s10;
sec = 2*Math.PI * s10/100;
sec = sensRotation * sec;
min = 2*Math.PI * m10/100;
min = sensRotation * min;
hrs = 2*Math.PI * (h10 + m10/100)/10;
hrs = sensRotation * hrs;
for (i=0; i < Contour.length; i++){
var C=ieContour[i].style;
C.top=y[i] + ClockHeight - ClockHeight*Math.sin(Math.PI/2 + i*2*Math.PI/Contour.length);
C.left=x[i] + ClockWidth - ClockWidth*Math.cos(Math.PI/2 + i*2*Math.PI/Contour.length);
}
for (i=n-1; i >= 0; i--){
var F=ieFace[i].style;
F.top=y[i] + ClockHeight - (ClockHeight+10)*Math.sin(Math.PI/2 + (i-(n-1))*Split);
F.left=x[i] + ClockWidth - (ClockWidth+10)*Math.cos(Math.PI/2 + (i-(n-1))*Split);
}
for (i=0; i < H.length; i++){
var HL=ieHours[i].style;
HL.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + hrs));
HL.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + hrs));
}
for (i=0; i < M.length; i++){
var ML=ieMinutes[i].style;
ML.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + min));
ML.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + min));
}
for (i=0; i < S.length; i++){
var SL=ieSeconds[i].style;
SL.top=y[i]+ ClockHeight - (i*HandHeight)*(sensRotation*Math.sin(Math.PI/2 + sec));
SL.left=x[i]+ ClockWidth - (i*HandWidth)*(sensRotation*Math.cos(Math.PI/2 + sec));
}
}
function Delay(){
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
window.onload=Delay;
</script>
</html>

<html>
<style>
 div { position:absolute;font-family:Arial;text-align:center;font-weight:bold }
</style>

<script language="JavaScript">
//horloge base 100
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=100; //rayon de la hauteur de l'horloge
ClockWidth=100; //rayon de la largeur de l'horloge
ClockFromMouseY=0;
ClockFromMouseX=0;

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

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

size=11; //taille de la police de caractère des chiffres
psize=18; //taille de la police de caractère des aiguilles
speed=0.4; //vitesse pour que l'horloge se reconsititue
Face=Face.split(' ');
n=Face.length; 
ymouse=0;
xmouse=0;
Split=2*Math.PI/n; //angle entre chaque chiffre du cadran
HandHeight=ClockHeight/S.length;
HandWidth=ClockWidth/S.length;

y=new Array();x=new Array();Y=new Array();X=new Array();
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i < n; i++)
  { y[i]=0;x[i]=0;Y[i]=0;X[i]=0 }

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 id="date" style="position:absolute;top:10px;left:10px">&nbsp;</div">');

function Mouse(evnt){
  ymouse = event.y+ClockFromMouseY;
  xmouse = event.x+ClockFromMouseX;
}

document.onmousemove=Mouse;

function ClockAndAssign(){
  time = new Date ();
  nbsec = time.getHours()*3600 + time.getMinutes()*60 + time.getSeconds();
  nbsec10 = parseInt(nbsec*125/108);
  h10 = parseInt(nbsec10/10000);
  m10 = parseInt((nbsec10-h10*10000)/100);
  s10 = nbsec10-h10*10000-m10*100;
  document.getElementById("date").innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() + " ==> " + h10+":"+m10+":"+s10;
  sec = 2*Math.PI * s10/100;
  sec = sensRotation * sec;
  min = 2*Math.PI * m10/100;
  min = sensRotation * min;
  hrs = 2*Math.PI * (h10 + m10/100)/10;
  hrs = sensRotation * hrs;

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

  for (i=n-1; i >= 0; i--){
    var F=ieFace[i].style;
    F.top=y[i] + ClockHeight - (ClockHeight+10)*Math.sin(Math.PI/2 + (i-(n-1))*Split);
    F.left=x[i] + ClockWidth - (ClockWidth+10)*Math.cos(Math.PI/2 + (i-(n-1))*Split);
  }

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

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

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

function Delay(){
  y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
  x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

  for (i=1; i < n; i++){
    y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
    x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
  }

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

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

Conclusion

Pour le moment c'est uniquement du Internet Explorer.....
J'ai également mis la correspondance en numérique entre notre horloge (24h) et celle ci (10h).

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

UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE

TRI DYNAMIQUE DE TABLEAU

Toutes les sources de jerms

Sources de la même categorie

NOMBRE DE JOURS, MOIS ET ANNÉES DEPUIS LA NAISSANCE par marcenana

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

Toutes les sources de la catégorie Date & Heure

Commentaires et avis

Commentaire de DomJ le 04/06/2006 23:56:26

des fois, il passe 2 secondes, ex: 97,99,0

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP