JavaScript 如何创建一个即将上线的页面

什么是即将上线页面

首先，我们需要知道即将上线页面的含义，即将上线是一个词语，意味着某件事将按计划或预期在不久的将来发生。因此，我们得出结论，即将上线页面是一种用于宣传并告知潜在观众未来页面上发生的事情的网页类型。（例如：在电子商务网站上弹出的新智能手机页面）。本文将讨论如何创建即将上线页面。

即将上线页面的特点：

我们必须以观众的身份思考我们访问的特定页面上想要看到的内容，以及页面在设计和内容方面对我们的吸引力如何。
我们应该完全了解我们向观众呈现的内容。（例如：对于有机食品产品，我们会选择自然和食物的主题。）
在创建即将上线页面时，请务必加入倒计时天数。这样，观众就会知道产品将何时上市。
请务必在页面中加入“稍后观看”和“分享”链接选项，以便观众稍后观看或与他人分享页面。
方法：
首先，使用图像或画布设置网页的背景。
使用Date()设置上线日期。
使用setinterval()将每秒钟的计数更新到变量x中。
计算天，小时，分钟和秒。
显示结果。

示例：

在本示例中，我们使用上述解释的方法。

HTML

<!DOCTYPE HTML>
<HTML>
<style>
    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;
    }
</style>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<BODY>
    <header>
        <div class="Tech">
            <h2>COMING SOON</h2>
 
            <p id="Release"></p>
 
        </div>
    </header>
 
    <script>
        // Set the date of launching
        let RemainingTime = new Date("Feb 17, 2022 00:00:00");
 
        let RemainingTime = RemainingTime.getTime();
 
        // Update the count down every second
        let x = setInterval(function () {
 
            // Get current date and time
            let now = new Date().getTime();
            let distance = RemainingTime - now;
 
            // Days, hours, minutes and seconds time calculations
            let days_remaining =
                Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours_remaining =
                Math.floor(days_remaining / (1000 * 60 * 60));
            let x1 = distance % (1000 * 60 * 60);
            let minutes = Math.floor(x1 / (1000 * 60));
            let x2 = distance % (1000 * 60);
            let 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);
    </script>
</BODY>
</HTML>

输出：

JavaScript 如何创建一个即将上线的页面