WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2087
pan4o
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
12 April 2025
Ein Code von Farah
23 October 2024
.
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) }