WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
HORLOGE COUNTDOWN
691
Mikeykun
Open In Editor
Publish Your Code
0
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="frontend/css/index.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="timer"> <div class="contour"> <div class="hour"> <span id="hour"></span> </div> : <div class="min"> <span id="min"></span> </div> : <div class="sec"> <span id="sec"></span> </div> </div> </div> <script src="/frontend/js/style.js"></script> </body> </html>
CSS
Copy
*{margin: 0; padding: 0; box-sizing: border-box;} body{ background: rgb(238, 238, 238); display: flex; justify-content: center; align-items: center; height: 100vh } .timer{ display: flex; align-items: center; justify-content: center; flex-direction: row; color: rgb(194, 28, 28); font-size: 60px; background-color: rgb(79, 78, 78); height: 300px; width: 600px; border-radius: 70px; } .timer div{ margin: 10px; } .timer div span{ color: red; font-size: 120px; font-weight: bold; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; } .contour{ display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: rgb(14, 13, 13); height: 250px; width: 550px; border-radius: 50px; color: white; }
JS
Copy
// Variables pour stocker le temps let secondes = 0; let minutes = 0; let heures = 0; const sec = document.getElementById("sec"); const min = document.getElementById("min"); const hour = document.getElementById("hour"); function demarrerChrono() { setInterval(function() { secondes++; if (secondes == 60) { secondes = 0; minutes++; } if (minutes == 60) { minutes = 0; heures++; } sec.innerHTML = secondes < 10 ? "0" + secondes : secondes; min.innerHTML = minutes < 10 ? "0" + minutes : minutes; hour.innerHTML = heures < 10 ? "0" + heures : heures; }, 1000); } window.onload = function() { demarrerChrono(); };
