วิธีสร้างหน้า Coming Soon ด้วย 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>

ผลลัพธ์

หน้า Coming Soon พร้อมภาพพื้นหลังเต็มหน้าจอ และตัวนับถอยหลองแสดงวัน ชั่วโมง นาที วินาที