WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Compte à rebours du Nouvel An
2078
pan4o
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
9 July 2025
Iframe réactif avec navigation d'aperçu de l'appareil
17 May 2024
Page de destination
22 January 2025
mot de passe de connexion simple
HTML
Copy
New Year Countdown
Made by pan4o
Countdown to New Year
2025
00
00
00
00
CSS
Copy
body { margin: 0; display: flex; flex-direction: column; align-items: center; height: 100vh; justify-content: center; font-family: cursive; background-color: slateblue; overflow: hidden; #credits {position: fixed; bottom: 10px; right: 10px; color: black; font-size: 12px; font-family: Arial, sans-serif;} } h2 { color: white; text-align:center; text-transform: uppercase; letter-spacing: 4px; } .year { font-size: 5em; color: white; font-weight: bold; } .countdown { margin: 30px; background-color: rgba(0, 0, 0, 0.1); width: 100%; color: white; height: 120px; display: flex; justify-content: center; align-items: center; } .countdown div { margin: 0 15px; font-size: 2.5em; font-weight: 500; margin-top: -25px; position: relative; text-align: center; width: 100px; } .countdown div::before { content: ""; position: absolute; bottom: -30px; left: 0; font-size: 0.35em; line-height: 35px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; width: 100%; height: 35px; } .countdown #day::before { content: "Days"; } .countdown #hour::before { content: "Hours"; } .countdown #minute::before { content: "Minutes"; } .countdown #second::before { content: "Seconds"; }
JS
Copy
const dayEl = document.getElementById("day") const hourEl = document.getElementById("hour") const minuteEl = document.getElementById("minute") const secondEl = document.getElementById("second") const newYearTime = new Date("Jan 1, 2025, 00:00:00").getTime(); updateCountdown(); function updateCountdown(){ const now = new Date().getTime(); const gap = newYearTime - now; const second = 1000; const minute = second * 60 const hour = minute * 60 const day = hour * 24 const d = Math.floor(gap / day); const h = Math.floor((gap % day) / hour); const m = Math.floor((gap % hour) / minute); const s = Math.floor((gap % minute) /second); dayEl.innerText = d; hourEl.innerText = h; minuteEl.innerText = m; secondEl.innerText = s; setTimeout(updateCountdown, 1000) }