caculartor-1

2 months ago · 2002a1430d
parent 644041ba20
commit 2002a1430d
1 changed files with 70 additions and 0 deletions
--- a/caculator.html
+++ b/caculator.html
@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>简单计算器</title>
+    <style>
+        body { 
+        font-family: Arial, sans-serif; 
+        }
+        .container {
+         width: 300px; margin: 50px auto; 
+         padding: 20px; 
+         border: 1px solid #ccc;
+        box-shadow: 2px 2px 10px #888888;
+        }
+        input[type="number"], select { width: 100%; padding: 10px; margin: 10px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }
+        button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; }
+        h2 { text-align: center; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>简易计算器</h2>
+        <input type="number" id="num1" placeholder="输入第一个数字" required>
+        <input type="number" id="num2" placeholder="输入第二个数字" required>
+        <select id="operation">
+            <option value="add">加 (+)</option>
+            <option value="subtract">减 (-)</option>
+            <option value="multiply">乘 (*)</option>
+            <option value="divide">除 (/)</option>
+            <option value="modulus">模 (%)</option>
+        </select>
+        <button onclick="calculate()">计算</button>
+        <p id="result"></p>
+    </div>
+
+    <script>
+        function calculate() {
+            var num1 = parseFloat(document.getElementById('num1').value);
+            var num2 = parseFloat(document.getElementById('num2').value);
+            var operation = document.getElementById('operation').value;
+            var result;
+
+            switch(operation) {
+                case 'add':
+                    result = num1 + num2;
+                    break;
+                case 'subtract':
+                    result = num1 - num2;
+                    break;
+                case 'multiply':
+                    result = num1 * num2;
+                    break;
+                case 'divide':
+                    if(num2 !== 0) {
+                        result = num1 / num2;
+                    } else {
+                        result = '除数不能为0';
+                    }
+                    break;
+                case 'modulus':
+                    result = num1 % num2;
+                    break;
+            }
+
+            document.getElementById('result').innerText = '结果: ' + result;
+        }
+    </script>
+</body>
+</html>