如何使用 JavaScript 创建即将推出的页面？

什么是即将推出的页面？

首先，我们需要知道 Coming Soon Page是什么意思， Coming Soon是一个术语，表示将按计划或预期在不久的将来发生的事情。因此，我们得出的结论是，即将到来的页面是一种网页，用于宣传和告知潜在观众该网站页面上接下来会发生什么。 （例如：电子商务网站上弹出的新智能手机页面。在本文中，我们将讨论如何创建即将推出的页面。

即将推出的页面功能：

1. 作为查看者，我们必须考虑我们希望在我们正在访问的特定页面上看到什么，以及该页面在设计和内容方面对我们的吸引力。
2. 我们应该完全了解我们向观众展示的内容。 （例如：- 对于有机食品，我们将选择自然和食物的主题。
3. 当您创建即将推出的页面时，请务必输入倒计时日。因此，观众会知道该产品何时推出。
4. 请务必将“稍后观看”和“分享”链接选项放在页面上，以便查看者以后想观看此页面或尽可能与其他人分享该页面。

方法：

• 首先使用图像或画布设置网页的背景。
• 使用 Date() 设置启动日期。
• 使用 setinterval() 更新 var x 中每秒的计数。
• 计算天、小时、分钟和秒
• 显示结果

例子：

HTML

    header {
        background-image: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210908212955/Get-Hired-With-GeeksforGeeks-GFG-Job-Portal.png);
        background-position: center;
        height: 100vh;
        background-size: 100% 96%;
    }
      
    .Tech {
        top: 19%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: rgb(20, 158, 212);
        text-align: center;
        font-size: 17px;
    }
      
    #Release {
        color: white;
        font-size: 40px;
        word-spacing: 10px;
    }

  

    

  

    
        
            COMING SOON
  
            
  
        
    
  
    
        // Set the date of launching
        var RemainingTime = new Date("Feb 17, 2022 00:00:00");
  
        var RemainingTime = RemainingTime.getTime();
  
        // Update the count down every second
        var x = setInterval(function() {
  
            // Get current date and time
            var now = new Date().getTime();
            var distance = RemainingTime - now;
  
            // Days, hours, minutes and seconds time calculations
            var days_remaining =
                 Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours_remaining = 
                 Math.floor(days_remaining / (1000 * 60 * 60));
            var x1 = distance % (1000 * 60 * 60);
            var minutes = Math.floor(x1 / (1000 * 60));
            var x2 = distance % (1000 * 60);
            var seconds = Math.floor(x2 / 1000);
  
            // Display the results
            document.getElementById("Release").innerHTML =
                days_remaining +
                " : " + hours_remaining + " : " + minutes +
                " : " + seconds;
  
            // Text after count down is over
            if (distance < 0) {
                clearinterval(x);
                document.getElementById("Release").
                innerHTML = "Welcome";
            }
  
        }, 1000);
    

  

输出：