js怎么做计算器加减

在JavaScript中创建一个计算器应用程序并不复杂，主要包括设计用户界面和编写逻辑来处理用户输入和计算结果。使用事件监听器捕捉用户输入、操作DOM更新显示、编写函数处理加减法是实现的核心步骤。以下是一个详细的示范：

一、设计用户界面

首先，我们需要设计一个简单的HTML用户界面。这个界面将包括一个显示屏和一些按钮来输入数字和操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <style>
        .calculator {
            border: 1px solid #000;
            width: 200px;
            padding: 10px;
            margin: 50px auto;
        }
        .display {
            width: 100%;
            height: 50px;
            text-align: right;
            margin-bottom: 10px;
            font-size: 24px;
            padding: 5px;
            box-sizing: border-box;
        }
        .button {
            width: 25%;
            height: 50px;
            font-size: 24px;
            margin: 5px 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" disabled>
        <div>
            <button class="button" data-value="1">1</button>
            <button class="button" data-value="2">2</button>
            <button class="button" data-value="3">3</button>
            <button class="button" data-value="+">+</button>
        </div>
        <div>
            <button class="button" data-value="4">4</button>
            <button class="button" data-value="5">5</button>
            <button class="button" data-value="6">6</button>
            <button class="button" data-value="-">-</button>
        </div>
        <div>
            <button class="button" data-value="7">7</button>
            <button class="button" data-value="8">8</button>
            <button class="button" data-value="9">9</button>
            <button class="button" data-value="=">=</button>
        </div>
        <div>
            <button class="button" data-value="0">0</button>
            <button class="button" data-value="C">C</button>
        </div>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

二、编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理用户输入和计算操作。

document.addEventListener('DOMContentLoaded', function () {
    const display = document.querySelector('.display');
    const buttons = document.querySelectorAll('.button');
    let currentInput = '';
    let operator = '';
    let firstOperand = '';
    let secondOperand = '';
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const value = button.getAttribute('data-value');
            if (!isNaN(value)) {
                currentInput += value;
                display.value = currentInput;
            } else if (value === 'C') {
                currentInput = '';
                operator = '';
                firstOperand = '';
                secondOperand = '';
                display.value = '';
            } else if (value === '=') {
                if (firstOperand && operator && currentInput) {
                    secondOperand = currentInput;
                    display.value = calculate(firstOperand, operator, secondOperand);
                    firstOperand = '';
                    secondOperand = '';
                    operator = '';
                    currentInput = display.value;
                }
            } else {
                if (!firstOperand) {
                    firstOperand = currentInput;
                    operator = value;
                    currentInput = '';
                } else if (firstOperand && operator && currentInput) {
                    secondOperand = currentInput;
                    display.value = calculate(firstOperand, operator, secondOperand);
                    firstOperand = display.value;
                    secondOperand = '';
                    operator = value;
                    currentInput = '';
                }
            }
        });
    });
    function calculate(firstOperand, operator, secondOperand) {
        let result = 0;
        switch (operator) {
            case '+':
                result = parseFloat(firstOperand) + parseFloat(secondOperand);
                break;
            case '-':
                result = parseFloat(firstOperand) - parseFloat(secondOperand);
                break;
        }
        return result.toString();
    }
});

三、用户输入处理

在这个部分，我们设置了事件监听器来捕捉按钮点击事件，并根据按钮的值来更新显示屏。数字按钮更新当前输入，操作按钮（如加号和减号）保存当前输入作为第一个操作数并清空当前输入以准备下一个操作数。当用户点击等号按钮时，计算结果并显示出来。

四、函数实现

这里我们实现了一个简单的calculate函数来处理加减法运算。该函数接受三个参数：第一个操作数、操作符和第二个操作数。根据操作符的不同，执行相应的运算并返回结果。

五、总结

通过上述步骤，我们已经创建了一个简单的加减法计算器。这个例子展示了如何使用JavaScript来处理用户输入和执行基本的算术运算。使用事件监听器捕捉用户输入、操作DOM更新显示、编写函数处理加减法是实现的核心步骤。这个示例也为更复杂的计算器功能（如乘法、除法、括号操作等）提供了基础。希望这个示例对您有所帮助！