如何创建动态HTML页面

概述

现在大多数页面都是动态的，动态页面意味着它根据用户的需求来改变内容。仅仅使用HTML和CSS是无法构建动态页面的，因为它们只能提供静态页面。要使网页动态化，我们需要使用脚本语言，如JavaScript或jQuery。我们可以通过多种方式实现页面的动态化，例如当用户输入凭据后，可以检索与其凭据相关的信息。动态页面还表示那些可以从网页的前端进行更改的网页。

算法

步骤1 − 在文本编辑器中创建一个HTML文件，并在HTML文件中添加HTML样板。

步骤2 − 现在创建一个包含网站动态封面背景的div容器。

<div id="cover"></div>

第三步 − 现在给封面页组件添加标题，并在标题标签内添加span标签。

<h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>

步骤4 − 现在创建输入按钮，使背景动态变化，并为每个输入按钮添加onclick属性，“bgL()”和“bgD()”。

<input id="cBtn" type="button" value="light" onclick="bgL()">
<input id="cBtn" type="button" value="dark" onclick="bgD()">

步骤5 − 现在在同一个文件夹中创建一个style.css文件，并将该样式表链接到HTML文档的head标签中。

<link rel="stylesheet" href="style.css">

第6步 − 在HTML文档的body标签中创建一个script标签。

<script></script>

步骤7 - 创建一个名为”setTimeout()”的JavaScript函数，在1秒后弹出一个提示框。这将在浏览器封面页上输入用户名。

setTimeout(() => {
            let uname = prompt("Enter your gaming name.", "");
            var s = document.getElementById("userName");
            if (uname != "" || uname != null) {
                s.innerHTML = uname + ",";
                document.getElementById("cover").style.backgroundColor = "green"
            }
            var i = document.getElementById("cBtn");
            i.addEventListener("click",()=>{
                i.checkVisibility
            })

        }, 1000);

步骤 8 - 现在创建两个JavaScript箭头函数，它们的名称与上述两个按钮中传递的名称相同，分别为bgL()和bgD()。

bgL=()=>{
}
bgD=()=>{
}

第九步 − 将HTML DOM属性添加到函数中，该函数将根据按钮上给定的颜色名称分别更改封面的背景颜色。

bgL=()=>{            document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
}

bgD=()=>{            document.getElementById("cover").style.backgroundColor="#0a0a0a"
}

第10步 - 动态HTML页面已成功创建。

示例

在这个示例中，我们将创建一个动态HTML页面，该页面将根据其内容和背景颜色的变化而动态变化。因此，我们将创建两个文件，第一个文件将包含页面的HTML布局部分和动态页面的脚本。第二个文件包含页面的样式部分。

index.html

<html>
<head>
    <title>Dynamic HTML Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="coverPage">
        <div id="cover">
            <h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>
            <p>tutorialspoint.com</p>
        </div>
    </div>
    <p style="width: 80vw;text-align: center;">Use teh below buttons to change the background of the above cover.</p>
    <div class="changeBg">
        <input id="cBtn" type="button" value="light" onclick="bgL()">
        <input id="cBtn" type="button" value="dark" onclick="bgD()">
    </div>
    <script>
        setTimeout(() => {
            let uname = prompt("Enter your name.", "");
            var s = document.getElementById("userName");
            if (uname != "" || uname != null) {
                s.innerHTML = uname + ",";
                document.getElementById("cover").style.backgroundColor = "green"
            }
            var i = document.getElementById("cBtn");
            i.addEventListener("click",()=>{
                i.checkVisibility
            })

        }, 1000);
        bgL=()=>{   document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
        }
        bgD=()=>{   document.getElementById("cover").style.backgroundColor="#0a0a0a"
        }
    </script>
</body>
</html>

stye.css

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Segoe UI';
    width: 100%;
    height: 100%;
}

#cover {
    height: 10rem;
    width: 80vw;
    background-color: rgba(0, 0, 0, 0.616);
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
h3{
    font-size: 3vw;
}
@media (max-width:500px) {
    h3{
        font-size: 5vw;
    }
}

示例

<html>
<head>
    <title>Dynamic HTML Page</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Segoe UI';
    width: 100%;
    height: 100%;
}
#cover {
    height: 10rem;
    width: 80vw;
    background-color: rgba(0, 0, 0, 0.616);
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
h3{
    font-size: 3vw;
}
@media (max-width:500px) {
    h3{
        font-size: 5vw;
    }
}
    </style>
</head>
<body>
    <div class="coverPage">
        <div id="cover">
            <h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>
            <p>tutorialspoint.com</p>
        </div>
    </div>
    <p style="width: 80vw;text-align: center;">Use the below buttons to change the background of the above cover.</p>
    <div class="changeBg">
        <input id="cBtn" type="button" value="light" onclick="bgL()">
        <input id="cBtn" type="button" value="dark" onclick="bgD()">
    </div>
    <script>
        setTimeout(() => {
            let uname = prompt("Enter your name.", "");
            var s = document.getElementById("userName");
            if (uname != "" || uname != null) {
                s.innerHTML = uname + ",";
                document.getElementById("cover").style.backgroundColor = "green"
            }
            var i = document.getElementById("cBtn");
            i.addEventListener("click",()=>{
                i.checkVisibility
            })

        }, 1000);
        bgL=()=>{   document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
        }
        bgD=()=>{   document.getElementById("cover").style.backgroundColor="#0a0a0a"
        document.getElementById("cover").style.color="white"
        }
    </script>
</body>
</html>