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>