WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2350
pan4o
Apri nell'Editor
Pubblica il Tuo Codice
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) }