Montre avec horloge à aiguille
Par Malik • 05 July 2024
Dans cet article, nous allons créer ensemble une montre analogique dynamique en utilisant HTML, CSS et JavaScript. Vous découvrirez comment construire une structure élégante pour une montre et comment animer ses aiguilles pour qu'elles affichent l'heure en temps réel.
Nous commencerons par le code HTML, qui définit la structure de base de notre montre. Ensuite, nous utiliserons le CSS pour lui donner un style visuel moderne et des effets intéressants. Enfin, nous intégrerons du JavaScript pour animer les aiguilles de la montre, synchronisées avec l'heure actuelle.
Voici le code HTML qui met en place la structure de la montre.
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Montre</title>
</head>
<body>
<div class="watch">
<div class="container">
<div class="clock">
<div class="clock-bg">
<img src="img/clock.png" alt="Montre" />
</div>
<div class="hour">
<span class="hr" id="hr"></span>
</div>
<div class="minute">
<span class="min" id="min"></span>
</div>
<div class="second">
<span class="sec" id="sec"></span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Le CSS ajoute du style et des animations à la montre, créant ainsi un effet visuel attrayant.
Code CSS
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
color: white;
background-color: #1d1e22;
overflow: hidden;
}
.watch {
--watch-color: white;
--screen-color: black;
font-size: 4.5vmin;
font-family: monospace;
color: #fff;
padding: 2em 1.5em;
border: 2px solid var(--watch-color);
border-radius: 2em;
box-shadow: inset 0 0 0 0.5em black, inset 0 0 1rem 1em #ffffff40;
background-color: var(--screen-color);
background-image: linear-gradient(to bottom right, #fff0 50%, #ffffff40);
position: relative;
}
.watch::before,
.watch::after {
content: "";
position: absolute;
background-color: var(--watch-color);
z-index: -1;
}
.watch::after {
inset: -0.5em 20%;
border-radius: 0.5em;
background-image: linear-gradient(
#fff0,
hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em),
#fff0
);
}
.watch::before {
inset: -50vh 25%;
background-image: repeating-linear-gradient(
#fff0 0 0.3em,
#00000020 0.3em 0.5em,
#fff0 0.5em 0.8em
),
radial-gradient(circle, #fff0, #00000040 50%);
}
.container {
position: relative;
}
.container .circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
animation: 2s ease-in infinite alternate;
}
.container .circle:nth-child(1) {
width: 180px;
height: 180px;
top: -60px;
left: -60px;
background: linear-gradient(#2451e5, #21c8d4);
animation-name: move-up;
}
@keyframes move-up {
to {
transform: translateY(-10px);
}
}
.container .circle:nth-child(2) {
width: 120px;
height: 120px;
bottom: -20px;
right: -20px;
background: linear-gradient(#6d12d6, #e407bf);
animation-name: move-down;
}
@keyframes move-down {
to {
transform: translateY(10px);
}
}
.clock {
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.clock .clock-bg img {
width: 100%;
height: 100%;
}
.clock::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
z-index: 15;
}
.clock .hour,
.clock .minute,
.clock .second {
position: absolute;
}
.clock .hour,
.clock .hour .hr {
width: 100px;
height: 100px;
}
.clock .minute,
.clock .minute .min {
width: 150px;
height: 150px;
}
.clock .second,
.clock .second .sec {
width: 200px;
height: 200px;
}
.clock .hour .hr,
.clock .minute .min,
.clock .second .sec {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.clock .hour .hr::before {
content: "";
position: absolute;
width: 8px;
height: 80px;
background: #ff3d68;
z-index: 10;
border-radius: 10px;
}
.clock .minute .min::before {
content: "";
position: absolute;
width: 4px;
height: 90px;
background: #39a2db;
z-index: 11;
border-radius: 8px;
}
.clock .second .sec::before {
content: "";
position: absolute;
width: 3px;
height: 140px;
background: #fff;
z-index: 12;
border-radius: 2px;
}
Le JavaScript met en mouvement les aiguilles de la montre en temps réel pour afficher l'heure exacte.
Code JavaScript
const degree = 6;
const hr = document.querySelector("#hr");
const min = document.querySelector("#min");
const sec = document.querySelector("#sec");
setInterval(() => {
const date = new Date();
const hh = date.getHours() * 30;
const mm = date.getMinutes() * degree;
const ss = date.getSeconds() * degree;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
min.style.transform = `rotateZ(${mm}deg)`;
sec.style.transform = `rotateZ(${ss}deg)`;
}, 1000);
Et voilà, vous avez une montre numérique stylée, toute prête à être intégrée dans vos projets ! Ce qui rend cette montre vraiment cool, c'est la manière dont le JavaScript entre en jeu pour faire bouger les aiguilles en temps réel. Grâce à ce script, vous pouvez voir les heures, les minutes et les secondes bouger comme sur une vraie montre. N’hésitez pas à personnaliser le design ou les fonctionnalités.
Suivez-moi
Conception de site vitrine personnalisé
Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.
Obtenez votre devis personnalisé