如何创建动态 HTML 页面

front end technologyhtmlcssjquery更新于 2025/2/11 1:48:17

概述

如今，大多数页面本质上都是动态的，动态页面意味着它会根据用户的变化而改变内容。动态页面不能仅靠 HTML 和 CSS 构建，因为这样只能提供页面的静态属性。因此，为了使网页动态化，我们必须使用 JavaScript 或 jQuery 等脚本语言。我们可以通过多种方式使页面动态化，例如，当用户在页面上输入其凭据时，他可以检索与其凭据相关的信息。动态页面也指那些可以从网页前端进行更改的网页。

算法

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

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

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

步骤 3 − 现在向封面组件添加标题，并在标题标签内添加 span 标签。

<h3>欢迎使用 <span id="userName"></span> 教程点。</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 − 创建一个 JavaScript 的 setTimeout() 函数，用于在 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=()=>{
}

步骤 9− 为函数添加 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>