CSS और JavaScript से कमिंग सून पेज बनाने के लिए, कोड निम्नानुसार है -
उदाहरण
<!DOCTYPE html> <html> <style> body { height: 100vh; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0; } .timer { text-align: center; font-size: 60px; margin-top: 0px; color: white; } .bgimg { background-image: url("https://i.picsum.photos/id/829/800/800.jpg"); height: 100%; background-position: center; background-size: cover; position: relative; color: white; font-size: 25px; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } hr { margin: auto; width: 40%; } </style> <body> <div class="bgimg"> <div class="middle"> <h1>COMING SOON</h1> <hr /> <h2 class="timer"></h2> </div> </div> <script> var countDownDate = new Date("June 5, 2022 11:27:15").getTime(); var timeClear = setInterval(function() { var now = new Date().getTime(); var timeLeft = countDownDate - now; var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hours = Math.floor( (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (timeLeft < 0) { clearInterval(timeClear); document.querySelector(".timer").innerHTML = "Timer Finished"; } }, 1000); </script> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
