JavaScript 如何创建动态HTML页面
在本文章中,我们将了解如何使用HTML、CSS和JavaScript创建动态HTML页面。首先让我们知道什么是动态HTML页面。
动态HTML页面,顾名思义是指根据用户输入可自定义和可变的HTML页面。例如:
使用CSS,我们可以在用户点击网页上的按钮时每次更改网页的背景颜色。
使用JavaScript,我们可以要求用户输入他/她的姓名,然后在网页上动态显示它。
如果您想更多了解动态HTML页面,您可以参考这篇文章:DHTML JavaScript。
让我们来看一些例子,以了解如何使用HTML和CSS创建动态HTML页面。
示例1
输入用户名并动态更改网页的文本内容。
How to create dynamic HTML pages ?
Enter Your Name
function EnterName() {
let x = document.getElementById("name").value;
document.getElementById("demo").innerHTML =
"Welcome to Geeks For Geeks " + x;
}
输出:
示例2
在每次点击时动态更改网页的背景颜色
Enter Your Color Choice
Color
function changecolor() {
// Generating random color each time
let color = "#" + (Math.random() * 16777215 | 0).toString(16);
$("body").css("background-color", color);
}
输出: