Jabulous_Wong Posted March 14 Share Posted March 14 <head> <title>Responsive Countdown Timer</title> <style> body .sqs-block-code #timer { display: flex; justify-content: center; align-items: center; margin-top: -100px; text-align: center; /* Ensures text is centered */ } .timer-container { display: inline-block; /* This will only take up as much width as needed */ text-align: center; } .sqs-block-code #timer { font-size: 1.5vw; /* Adjusted font size for better visibility */ font-weight: bold; } @media only screen and (max-width: 600px) { .sqs-block-code #timer { font-size: 5vw; /* Larger font size on smaller screens for readability */ } } </style> </head> <body> <h4 style="text-align: center; font-weight: bold;">COMING UP IN</h4> <div id="timer"> 00d 00h 00m 00s </div> <script> // Set the date we're counting down to var countDownDate = new Date("Nov 7, 2024 00:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function() { try { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the countdown date var distance = countDownDate - now; // Time calculations for days, hours, minutes, and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="timer" document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the countdown is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("timer").innerHTML = "EXPIRED"; } } catch (e) { console.log("An error occurred with the countdown timer: ", e); // Optionally, display a user-friendly message or a static countdown. } }, 1000); </script> </body> Link to comment
tuanphan Posted March 15 Share Posted March 15 Can you share link to page where you added countdown? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment