AI 生成: 一个简洁美观的网页计算器，支持加、减、乘、除和清除功能，使用纯 HTML/CSS/JavaScript 实现。

2026-09-28 20:03:44 +08:00
commit 824623f7ee
4 changed files with 401 additions and 0 deletions
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>简易计算器</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="calculator">
+    <!-- 显示区域 -->
+    <div class="display" id="display">0</div>
+
+    <!-- 按键区域 -->
+    <div class="keys">
+      <button class="key key-clear" data-action="clear">C</button>
+      <button class="key key-op" data-action="operator" data-op="÷">÷</button>
+      <button class="key key-op" data-action="operator" data-op="×">×</button>
+      <button class="key key-op" data-action="operator" data-op="-">−</button>
+
+      <button class="key" data-action="number" data-value="7">7</button>
+      <button class="key" data-action="number" data-value="8">8</button>
+      <button class="key" data-action="number" data-value="9">9</button>
+      <button class="key key-op" data-action="operator" data-op="+">+</button>
+
+      <button class="key" data-action="number" data-value="4">4</button>
+      <button class="key" data-action="number" data-value="5">5</button>
+      <button class="key" data-action="number" data-value="6">6</button>
+      <button class="key key-equals" data-action="equals" rowspan="2">=</button>
+
+      <button class="key" data-action="number" data-value="1">1</button>
+      <button class="key" data-action="number" data-value="2">2</button>
+      <button class="key" data-action="number" data-value="3">3</button>
+
+      <button class="key key-zero" data-action="number" data-value="0">0</button>
+      <button class="key" data-action="decimal">.</button>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>