WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CUENTA REGRESIVA PARA VER
17
Mikeykun
Abrir en el editor
Video
Publica tu código
0
Recomendado
28 August 2024
Animación de desplazamiento de paralaje
18 August 2024
Casilla de verificación / ¿Desarrollador o diseñador?
1 August 2025
Rectángulos verticales arrastrables HTML
HTML
Copy
Document
:
:
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(); };