如何创建动态 HTML 页面？

动态 HTML 页面经常用于交互式 Web 应用程序或动画效果。通过使用 HTML、CSS 和 JavaScript，您可以创建动态的 Web 页面。下面介绍了一些如何创建动态 HTML 页面的方法。

1. 使用 JavaScript

JavaScript 是用于创建动态 Web 页面的最常用工具之一。您可以使用 JavaScript 更新页面的元素、更改样式、执行动画和交互式功能。在 HTML 页面中嵌入您的 JavaScript 代码，或将其保存到 *.js 文件中，然后在网页中导入它们。

<script> 
  function changeColor() { 
    document.getElementById("myDiv").style.color="red"; 
  } 
</script> 

<div id="myDiv">Hello, world!</div> 
<button onclick="changeColor()">Change Color</button>

上述代码将页面中 myDiv 元素的文字颜色更改为红色，并且添加一个按钮，用于触发函数 changeColor() 。

2. 使用 jQuery

jQuery 是一种广泛使用的 JavaScript 库。它提供了很多易于使用的函数，用于操作 HTML 元素、简化事件处理和处理 AJAX 请求。在您的 HTML 页面中导入 jQuery 库，然后使用 jQuery 函数更新您的页面元素。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 

<div id="myDiv2">Hello, world!</div> 
<button id="changeColorBtn">Change Color</button>

<script> 
  $(document).ready(function(){ 
    $("#changeColorBtn").click(function(){ 
      $("#myDiv2").css("color", "blue"); 
    }); 
  }); 
</script>

上述代码将页面中 myDiv2 元素的文字颜色更改为蓝色，并且添加一个按钮，用于按下后执行函数 。

3. 使用 CSS 动画

CSS 动画可以通过添加类、更改属性或使用关键帧动画创建。它们与使用 JavaScript 一样强大，但可能需要更少的代码行。使用 CSS 动画时，您可以通过应用类或更改 CSS 属性来激活它们。

<style> 
  .fadeout { 
    opacity: 0; 
    animation: fadeOut 2s ease-in-out forwards; 
  } 

  @keyframes fadeOut { 
    0% { opacity: 1; } 
    100% { opacity: 0; } 
  } 
</style> 

<div id="myDiv3">Hello, world!</div> 
<button id="fadeOutBtn">Fade Out</button>

<script> 
  $(document).ready(function(){ 
    $("#fadeOutBtn").click(function(){ 
      $("#myDiv3").addClass("fadeout"); 
    }); 
  }); 
</script>

上述代码将 myDiv3 元素的不透明度更改为 0，在 2 秒钟内渐变为 0，然后添加一个 fadeOutBtn 按钮，点击后触发 fadeout 类。

以上是三种常用的创建动态 HTML 页面的方法，当然还有其他方法，取决于您的具体情况和需求。