js实现计算器连续加减

以下是在JavaScript中实现计算器连续加减功能的实现方法：

实现思路

连续加减计算器需要记录当前输入的数字、运算符以及计算结果。每次点击运算符按钮时，需要将当前输入的数字与之前的计算结果进行运算。

代码实现

let currentInput = '';
let previousInput = '';
let operation = null;
let result = 0;

function updateDisplay(value) {
    document.getElementById('display').value = value;
}

function inputNumber(number) {
    currentInput += number;
    updateDisplay(currentInput);
}

function inputOperator(op) {
    if (currentInput === '') return;

    if (previousInput !== '') {
        calculate();
    } else {
        result = parseFloat(currentInput);
    }

    operation = op;
    previousInput = currentInput;
    currentInput = '';
}

function calculate() {
    if (currentInput === '' || previousInput === '') return;

    const current = parseFloat(currentInput);
    const previous = parseFloat(previousInput);

    switch(operation) {
        case '+':
            result = previous + current;
            break;
        case '-':
            result = previous - current;
            break;
    }

    currentInput = '';
    previousInput = '';
    operation = null;
    updateDisplay(result);
}

function clearAll() {
    currentInput = '';
    previousInput = '';
    operation = null;
    result = 0;
    updateDisplay('0');
}

HTML结构示例

<div class="calculator">
    <input type="text" id="display" value="0" readonly>
    <div class="buttons">
        <button onclick="inputNumber('1')">1</button>
        <button onclick="inputNumber('2')">2</button>
        <button onclick="inputNumber('3')">3</button>
        <button onclick="inputOperator('+')">+</button>
        <button onclick="inputNumber('4')">4</button>
        <button onclick="inputNumber('5')">5</button>
        <button onclick="inputNumber('6')">6</button>
        <button onclick="inputOperator('-')">-</button>
        <button onclick="inputNumber('7')">7</button>
        <button onclick="inputNumber('8')">8</button>
        <button onclick="inputNumber('9')">9</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearAll()">C</button>
    </div>
</div>

关键点说明

• currentInput存储当前输入的数字
• previousInput存储上一个输入的数字
• operation存储当前选择的运算符
• result存储计算结果
• 点击数字按钮时调用inputNumber()函数
• 点击运算符按钮时调用inputOperator()函数
• 点击等号按钮时调用calculate()函数执行计算
• clearAll()函数用于重置计算器状态

扩展功能建议

可以添加更多运算符如乘除运算 增加小数点输入功能 添加历史记录功能 优化UI界面和交互体验

这种实现方式允许用户连续输入多个加减运算，每次点击运算符按钮时都会自动执行上一次的运算，最终点击等号显示最终结果。