WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>New Year Countdown</title> <link rel="stylesheet" href="style.css"> <div id="credits">Made by pan4o</div> </head> <body> <h2>Countdown to New Year</h2> <div class="year">2025</div> <div class="countdown"> <div id="day">00</div> <div id="hour">00</div> <div id="minute">00</div> <div id="second">00</div> </div> <script src="script.js"></script> </body> </html>
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"; }
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) }
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>New Year Countdown</title> <link rel="stylesheet" href="style.css"> <div id="credits">Made by pan4o</div> </head> <body> <h2>Countdown to New Year</h2> <div class="year">2025</div> <div class="countdown"> <div id="day">00</div> <div id="hour">00</div> <div id="minute">00</div> <div id="second">00</div> </div> <script src="script.js"></script> </body> </html>
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"; }
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) }
Preview
Validating your code, please wait...