<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <style> * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } h1 { text-align: center; margin-bottom: 50px; } .countdown { display: flex; justify-content: center; } .countdown div { margin: 0 10px; text-align: center; } .countdown span { display: block; font-size: 50px; font-weight: bold; color: #333; } .smalltext { color: #777; font-size: 16px; } </style> </head> <body> <div class="container"> <h1>Countdown Timer</h1> <div class="countdown"> <div> <span id="days"></span> <div class="smalltext">Days</div> </div> <div> <span id="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span id="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span id="seconds"></span> <div class="smalltext">Seconds</div> </div> </div> </div> <script> const countdown = () => { const countDate = new Date("June 30, 2023 00:00:00").getTime(); // Enter your target date and time here const now = new Date().getTime(); const gap = countDate - now; // Convert the time to days, hours, minutes and seconds const seconds = 1000; const minutes = seconds * 60; const hours = minutes * 60; const days = hours * 24; const textDays = Math.floor(gap / days); const textHours = Math.floor((gap % days) / hours); const textMinutes = Math.floor((gap % hours) / minutes); const textSeconds = Math.floor((gap % minutes) / seconds); document.getElementById("days").innerText = textDays; document.getElementById("hours").innerText = textHours; document.getElementById("minutes").innerText = textMinutes; document.getElementById("seconds").innerText = textSeconds; }; setInterval(countdown, 1000); // Update the countdown every second </script> </body> </html>
Discover a collection of free HTML tools to enhance your web development skills. Create amazing websites and boost your productivity with these valuable resources."
Sunday, May 7, 2023
100% Free Countdown Timer Tool: Easily Countdown Time by Using this Tool and Earn Money Online
Subscribe to:
Post Comments (Atom)
100% Free Language Translator Tool: Easily Translate Language by Using this Tool
Language Translator Language Translator Source Language: Afrikaans Albanian Amharic ...
No comments:
Post a Comment