如何创建动态HTML页面

在本文中，我们将了解如何使用HTML、CSS和JavaScript创建动态HTML页面。让我们首先了解什么是动态HTML页面。

动态HTML页面，顾名思义，是指可以根据用户输入进行定制和更改的HTML页面。例如：

使用CSS，我们可以在用户单击网页上的按钮时改变网页的背景颜色。
使用JavaScript，我们可以要求用户输入他/她的名字，然后在网页上动态显示。

如果您想了解更多关于动态HTML页面的信息，您可以阅读本文DHTML JavaScript。

让我们通过一些示例来了解如何使用HTML和CSS创建动态HTML页面。

示例1： 接受用户名作为输入，并动态更改网页的文本内容

<h1>请输入您的名字</h1>
  
<input id="name" 
       type="text">
<button type="button" 
        onclick="EnterName()">提交</button>
<p style="color:green" 
   id="demo"></p>
  
  
<script>
    function EnterName()
    {
        var x= document.getElementById("name").value;
      
        document.getElementById("demo").innerHTML = 
            "欢迎来到Geeks For Geeks "+ x ;
    }
</script>

输出：

如何创建动态HTML页面

创建动态HTML页面

示例2： 在每次点击时动态更改网页的背景颜色

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;" id="body">
    <h1>请输入您的颜色选择</h1>
  
    <button type="button" onclick="changecolor()">
        颜色
    </button>
  
    <script>
        function changecolor()
        {
            // 每次生成随机颜色
            var color = "#"+(Math.random()*16777215|0).toString(16);
              
            $("body").css("background-color",color);
        }
    </script>
</body>

输出：

如何创建动态HTML页面