資料結構
網路
關係資料庫管理系統 (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+ 瀏覽量
廣告