📌  相关文章
📜  JavaScript 如何在 10 行中创建一个屏幕可按下按钮? - Javascript(1)

📅  最后修改于: 2023-12-03 15:16:11.051000             🧑  作者: Mango

JavaScript 如何在 10 行中创建一个屏幕可按下按钮?

在 JavaScript 中创建一个可按下的按钮并不需要很复杂的代码。以下是一个使用 10 行代码实现的范例，该代码使用 HTML、CSS 和 JavaScript 结合，帮助你快速了解如何创建一个屏幕可按下按钮。

<!DOCTYPE html>
<html>
  <head>
    <title>A Button in 10 Lines of JavaScript</title>
    <style>
      /* 样式规则 - 给按钮添加样式 */
      #myButton {
        padding: 10px;
        background-color: #0074D9;
        color: #FFFFFF;
        border: none;
        border-radius: 5px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <!-- HTML - 利用 <button> 元素来创建按钮 -->
    <button id="myButton">Press Me</button>

    <!-- JavaScript - 给按钮添加 onclick 事件处理程序 -->
    <script>
      window.onload = function() {
        var myButton = document.getElementById("myButton");
        myButton.onclick = function() {
          alert("Hello, World!");
        };
      };
    </script>
  </body>
</html>

代码解释：

  1. HTML 部分，我们使用 button 标签创建一个按钮，将其 ID 设置为 myButton 以便使用 JavaScript 访问。
  2. 使用样式表来定义按钮的样式 - 我们为按钮应用样式以使其看起来更美观和易于点击。
  3. JavaScript 部分，我们在文档加载完成时（通过 window.onload）获取按钮元素并将其存储为 myButton 变量。
  4. 然后，我们将 myButton 变量设置为 onclick 事件处理程序，该处理程序在用户单击按钮时执行。在这种情况下，单击按钮将弹出一个消息框，说“Hello, World!”。

总体上，10 行代码构成了一个带有样式的按钮，并添加了事件处理程序来响应用户单击该按钮的操作。这个简单的代码示例可以作为你了解如何使用 JavaScript 和 HTML 来创建按钮的起点。