使用 javascript 在 html 中打招呼(1)

📌 相关文章

📜 使用 javascript 在 html 中打招呼(1)

📅 最后修改于: 2023-12-03 14:49:41.030000 🧑 作者: Mango

使用 JavaScript 在 HTML 中打招呼

JavaScript 是一种流行的编程语言，能够互动地修改 HTML 和 CSS，使网站更加生动和实用。本文将介绍如何使用 JavaScript 在 HTML 中打招呼。

简单示例

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript 打招呼示例</title>
  </head>
  <body>
    <script>
      alert("大家好！");
    </script>
  </body>
</html>

以上是一个简单的示例，当该页面被加载时，JavaScript 弹出一个框，展示了 "大家好！"。

console.log()

console.log() 是向控制台输出消息的 JavaScript 函数。可以在浏览器的开发者工具中查看这些消息。

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript 打招呼示例</title>
  </head>
  <body>
    <h2>打招呼示例</h2>
    <button onclick="greet()">打招呼</button>
    <script>
      function greet() {
        console.log("大家好！");
      }
    </script>
  </body>
</html>

以上代码创建了一个按钮，单击该按钮时，调用 greet() 函数并输出 "大家好！" 信息到控制台。

document.write()

使用 document.write() 可将文本或 HTML 插入到页面中。

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript 打招呼示例</title>
  </head>
  <body>
    <h2>打招呼示例</h2>
    <button onclick="greet()">打招呼</button>
    <script>
      function greet() {
        document.write("大家好！");
      }
    </script>
  </body>
</html>

以上代码创建了一个按钮，单击该按钮时，调用 greet() 函数并向文档中添加 "大家好！"。

innerHTML

使用 innerHTML 可以将文本或 HTML 插入到页面元素中。

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript 打招呼示例</title>
  </head>
  <body>
    <h2>打招呼示例</h2>
    <button onclick="greet()">打招呼</button>
    <div id="greeting"></div>
    <script>
      function greet() {
        document.getElementById("greeting").innerHTML = "大家好！";
      }
    </script>
  </body>
</html>

以上代码创建了一个按钮和一个空 div 元素，单击该按钮时，调用 greet() 函数并向 div 元素中添加 "大家好！"。

总结

本文介绍了如何使用 JavaScript 在 HTML 中打招呼。通过 alert()，console.log()，document.write() 和 innerHTML 函数，我们可以使用多种方式向用户展示消息。