数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何创建动态HTML页面
概述
如今大多数页面都是动态的，动态页面意味着它会根据用户而改变内容。仅使用HTML和CSS无法构建动态页面，因为它只能提供静态页面，因此要使网页动态化，我们必须使用脚本语言，例如javascript或jQuery。我们可以通过多种方式使页面动态化，例如当用户输入其凭据到页面时，他可以检索与其凭据相关的的信息。动态页面也代表那些可以从网页前端更改的网页。
算法
步骤1 - 在您的文本编辑器中创建一个HTML文件，并将HTML基本结构添加到HTML文件中。
步骤2 - 现在创建一个div容器，其中包含网站的动态封面背景。
<div id="cover"></div>
步骤3 - 现在在封面页面组件中添加标题，并在标题标签内添加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 - 创建一个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>
style.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>
结论
如上例所示，我们只创建了网页中两个动态组件，因此我们可以通过连接数据库来创建更多动态网页内容。大多数动态网站都是全栈的，这意味着它们拥有一个完整的完整前端以及与数据库连接的后端。如果我们谈论静态网站，那么这些网站仅用于阅读目的或向一群社区传达任何信息。因此，两种类型的网站都对其各自的目的有用。
更新于：2023年8月28日
4K+ 浏览量
广告