Scribd
Importer
5 vues6 pages

Horloge interactive en HTML et JS

Ce document est un code HTML complet pour créer une horloge analogique utilisant des éléments Canvas, JavaScript, HTML et CSS. Il inclut des styles pour le cadran de l'horloge, les aiguilles et les chiffres, ainsi qu'une fonction JavaScript qui met à jour l'heure en temps réel. L'horloge affiche les heures, minutes et secondes avec des aiguilles qui se déplacent en fonction du temps.

Transféré par

Kris Djepdo
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
5 vues6 pages

Horloge interactive en HTML et JS

Ce document est un code HTML complet pour créer une horloge analogique utilisant des éléments Canvas, JavaScript, HTML et CSS. Il inclut des styles pour le cadran de l'horloge, les aiguilles et les chiffres, ainsi qu'une fonction JavaScript qui met à jour l'heure en temps réel. L'horloge affiche les heures, minutes et secondes avec des aiguilles qui se déplacent en fonction du temps.

Transféré par

Kris Djepdo
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

<!--by Kris D follow me!

-->
<!DOCTYPE html>
<html>
<head>
<title>clock
</title>
<!--content="width=device-width,initial-scale=1.0"-->
<meta charset="UTF-8">
<style>

#fontclock
{
display: block;
margin-left: 25px;
margin-top: 25px;
border: 2px inset dodgerblue;
border-radius: 55px;
z-index: 1;
}
#title,#Numeric_clock
{
margin-left: 25px;
margin-top: 15px;
border: 2px inset dodgerblue;
border-radius: 5px;
padding: 3px;
width: 480px;
user-select: none;

}
label{margin-left: 25px;}
#title,#Numeric_clock{text-align: center;text-decoration: none;}
/**/
#hand1
{
position:absolute;
left: 35px;
top: 70px;
border-radius: 3px;
z-index: 4;
}
#hand2
{
position:absolute;
left: 35px;
top: 70px;
background-color: transparent;
z-index: 3;
}
#hand3
{
position:absolute;
left: 35px;
top: 70px;
z-index: 2;
}
#center
{
position:absolute;
left: 35px;
top: 70px;
z-index: 5;
}
</style>
</head>
<body>
<!--le div container est la pour permettre d'adapt� la taille de l'horlorge

selon celle de l'ecran gr�ce � des transformations de tranlation et de Zoom


-->
<div id="title"> Program clock with: Canvas+JS, HTML and CSS</div>
<!--les canvas se supperposent gr�ce a z-index
pour un alcul des positions plus ais�-->
<canvas id="fontclock" width="480px" height="480px" >
</canvas>
<!--seconds_hand-->
<canvas id="hand1" width="480px" height="480px"></canvas>
<!--minutes_hand-->
<canvas id="hand2" width="480px" height="480px"></canvas>
<!--hours_hand-->
<canvas id="hand3" width="480px" height="480px"></canvas>
<!--point de jointures des aiguilles-->
<canvas id='center' width="480px" height="480px"></canvas>
<div id="Numeric_clock"></div>
<div id="title">By Kris D <a href="#">...</a></div>
<script>
let fontclock= [Link]('fontclock'),
context= [Link]('2d');

/*creation du cadran de l'horloge avec des couleurs


avec des couleurs variant si possible selon le theme et lindice
du tableau de color*/
//la premiere circonference de couleur
[Link]='rgba(36, 35, 35, 0.89)';
[Link]();
[Link]='30';
[Link](240,240,220,0,[Link]*2);
[Link]();
[Link]();
/*la deuxieme circonf�rence de couleur b et inscrust�
dans la premiere pour un effet de style*/
[Link]='rgb(236, 235, 235)';
[Link]();
[Link]='10';
[Link](240,240,220,0,[Link]*2);
[Link]();
[Link]();
//la troisieme circonference de couleur c et devant contenir les
indicateurs de temps
[Link]='rgba(47, 79, 79, 0.26)';
[Link]();
[Link]='40';
[Link](240,240,180,0,[Link]*2);
[Link]();
[Link]();
//quatrieme circonference pleine de couleur a devant constituer le
cercle de lequelles roterons les aiguiles
[Link]();
[Link]='rgba(36, 35, 35, 0.89)';
[Link](240,240,160,0,[Link]*2);
[Link]();
//petit embellissement pour stimuler un engrenage
[Link]='rgba(255, 255, 255, 0.667)';//rgb(236, 235,
235)
[Link]();
[Link]='10';
[Link](240,240,30,0,[Link]*2);
[Link]();
[Link]();
//
//le centre du cadran ou seront relier les differentes aiguilles
[Link]='rgba(36, 35, 35, 0.89)';
[Link]();
[Link](240,240,6,0,[Link]*2);
[Link]();
[Link]();
//
/*fin de la creation du cadran*/
/*creation des chiffres devant represente les differentes
heures,minutes et secondes de notre horloge
leurs positions ont �te obtenues apres un petit calcul
Mathematique*/
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("12",227,67);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("6",232,430);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("9",50,248);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("3",415,248);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("2",389.6,154.5);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("1",325.5,92.4);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("4",389.6,338.5);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("5",323.5,400.6);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("7",143.5,400.6);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("8",76.4,338.5);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("10",72.4,160.5);
//
[Link]="bold 22pt Calibri,Geneva,Arial";
[Link]("11",140.5,94.4);
/*maintenant je cree les graduation de l'horloge sachant qu'elles
deux � deux obtenu apres une rotation de 6� de la postion de la
precedente*/
[Link]();
[Link](240,240);
for(let i=0; i<60; i++)
{
[Link]="black";
[Link]='3';
[Link]();
[Link](195,0);
[Link](200,0);
[Link]= 'square';
[Link]();
[Link]([Link]/30);
}
for(let i=0; i<12; i++)
{
[Link]="green";
[Link]='3';
[Link]();
[Link](195,0);
[Link](203,0);
[Link]= 'square';
[Link]();
[Link]([Link]/6);
}
[Link]();
//fin de la creation
//maintenant passe au aiguilles!
//seconds_hand
let cvs1=[Link]('#hand1'),
ctx1=[Link]('2d');
[Link]();
[Link](240,240);
[Link](-[Link]/2);
[Link]='black';
[Link]='1';
[Link]();
[Link]='round';
[Link](-20,-4);
[Link](-20,4);
[Link](175,1);
[Link](175,-1);
[Link](-20,-4);
//remplissage de l'aiguille avec une couleur claire
[Link]='rgb(248, 248, 234)';
[Link]();
[Link]();
[Link]();
//minutes_hand
let cvs2=[Link]('#hand2'),
ctx2=[Link]('2d');
[Link]();
[Link](240,240);
[Link](-[Link]/2);
[Link]='black';//'rgb(248, 248, 234)';
[Link]='4';
[Link]();
[Link](0,0,7.5,0,2*[Link]);
[Link]();
[Link]();
//
[Link]='2';
[Link]();
[Link](0,-4);
[Link](0,4);
[Link](125,8);
[Link](155,0);
[Link](125,-8);
[Link](0,-4);
//couleur de remplissage
[Link]='rgb(41, 93, 95)';
[Link]();
[Link]();
[Link]();
//hours_hand
let cvs3=[Link]('#hand3'),
ctx3=[Link]('2d');
[Link]();
[Link](240,240);
[Link](-[Link]/2);
[Link]='2';
//[Link]='rgb(240, 240, 230)';
[Link]='rgb(124,134,134)';
[Link]='black';
[Link]();
[Link](0,0,9.5,0,2*[Link]);
[Link]();
[Link]();
[Link]();
//
[Link]();
[Link](0,-4);
[Link](0,4);
[Link](30,8.5);
[Link](39,14.5);
[Link](48,8.5);
[Link](125,0);
[Link](48,-8.5);
[Link](39,-14.5);
[Link](30,-8.5);
[Link](0,-4);
[Link]();
[Link]();
[Link]();
//fin de la creation des aiguilles
/*creation du centre de jonction des aiguilles
degrad� pour stimule toujours unengrenage*/
let center=[Link]('center'),
ctx=[Link]('2d');
let radial=[Link](240,240,10,240,240,4);
[Link](0,'#d1d1cd');
[Link](0.5,'#878784');
[Link](1,'#eff0ef');
//
[Link]=radial;
[Link]='black';
[Link]();
[Link](240,240,10,0,2*[Link]);
[Link]();
[Link]();
//fin de creation

/*creation d'une fonction de temps devant transform� � chaque secondes


les aiguilles et affiche en temps reel l'heure qu'il est*/
setInterval(function()
{
let Numclock=[Link]('Numeric_clock'),
mydate=new Date(),
hours=[Link](),
min=[Link](),
seconds=[Link]();
[Link]=hours+':'+min+':'+seconds;
//
let radius1=seconds*6;

[Link]('hand1').[Link]='rotate('+radius1+'deg)';
//
let radius2=(min*6+(seconds/10));

[Link]('hand2').[Link]='rotate('+radius2+'deg)';
//
let radius3=(hours*30+(min/2));

[Link]('hand3').[Link]='rotate('+radius3+'deg)';

},1000);
//fin, is this the End.
</script>
</body>
</html>
<!--by Kris D, Follow me!-->

Vous aimerez peut-être aussi