添加：js测试弹窗按钮

2025-03-05 11:05:37 +08:00
parent 840ed10d06
commit c3d46c329b
3 changed files with 30 additions and 2 deletions
@@ -2,3 +2,22 @@
  margin: 0;
  padding: 0;
 }
+button {
+  border: 2px;
+  border-style: solid;
+  border-color: rgb(240, 120, 24);
+  width: 8em;
+  height: 3em;
+  color: rgb(255, 255, 255);
+  background-color: rgb(240, 120, 24);
+}
+
+button:hover {
+  color: rgb(240, 120, 24);
+  background-color: rgb(255, 255, 255);
+}
+
+#click_button {
+  display: block;
+  margin: 16em auto;
+}
@@ -4,8 +4,10 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
-    <link rel="text/javascript" href="index.js" />
+    <script src="index.js"></script>
    <title>js测试</title>
  </head>
-  <body></body>
+  <body>
+    <button id="click_button">点我弹窗</button>
+  </body>
 </html>
@@ -0,0 +1,7 @@
+alert('测试');
+document.addEventListener("DOMContentLoaded", function () {
+    const button = document.getElementById("click_button");
+    button.addEventListener("click", function () {
+        alert("你还真按啊");
+    });
+});