js计算器撤销怎么写

在 JavaScript 中实现计算器的撤销功能，可以使用以下几种方法：保存操作历史、利用栈数据结构、或者实现特定的撤销逻辑。 其中，利用栈数据结构是一种常见且高效的方法。你可以通过将每一次操作保存到栈中，当需要撤销时，从栈中弹出最后一次操作并恢复之前的状态。下面，我们将详细介绍如何使用栈数据结构来实现这一功能。

一、基础结构与初始化

在开始实现撤销功能之前，我们需要先构建一个基本的计算器结构，包括HTML和基本的JavaScript逻辑。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <style>
        /* 简单的样式 */
        .calculator { width: 200px; }
        .calculator input { width: 100%; height: 50px; text-align: right; }
        .calculator button { width: 25%; height: 50px; }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div>
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button onclick="operation('+')">+</button>
        </div>
        <div>
            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="operation('-')">-</button>
        </div>
        <div>
            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button onclick="operation('*')">*</button>
        </div>
        <div>
            <button onclick="appendNumber('0')">0</button>
            <button onclick="clearDisplay()">C</button>
            <button onclick="calculate()">=</button>
            <button onclick="operation('/')">/</button>
        </div>
        <div>
            <button onclick="undo()">Undo</button>
        </div>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

二、实现基本计算功能

接下来，我们编写 calculator.js 文件，实现基本的计算功能，包括数字输入、操作符输入、计算结果和清除显示。

let currentInput = '';
let operator = '';
let previousInput = '';
let historyStack = [];
function appendNumber(number) {
    currentInput += number;
    document.getElementById('display').value = currentInput;
}
function operation(op) {
    if (currentInput === '') return;
    previousInput = currentInput;
    currentInput = '';
    operator = op;
    document.getElementById('display').value = '';
}
function calculate() {
    if (previousInput === '' || currentInput === '') return;
    let result;
    switch (operator) {
        case '+':
            result = parseFloat(previousInput) + parseFloat(currentInput);
            break;
        case '-':
            result = parseFloat(previousInput) - parseFloat(currentInput);
            break;
        case '*':
            result = parseFloat(previousInput) * parseFloat(currentInput);
            break;
        case '/':
            result = parseFloat(previousInput) / parseFloat(currentInput);
            break;
    }
    historyStack.push({ previousInput, operator, currentInput, result });
    currentInput = result;
    operator = '';
    previousInput = '';
    document.getElementById('display').value = result;
}
function clearDisplay() {
    currentInput = '';
    operator = '';
    previousInput = '';
    document.getElementById('display').value = '';
}

三、实现撤销功能

为了实现撤销功能，我们需要在每次操作时将操作记录保存到 historyStack 栈中。当用户点击撤销按钮时，从栈中弹出最后一次操作，并恢复计算器的状态。

function undo() {
    if (historyStack.length === 0) return;
    const lastOperation = historyStack.pop();
    previousInput = lastOperation.previousInput;
    operator = lastOperation.operator;
    currentInput = lastOperation.currentInput;
    document.getElementById('display').value = previousInput;
}

四、优化撤销功能

为了更好地用户体验，我们可以在每次操作时更详细地记录状态，并在撤销时恢复所有的状态。

function appendNumber(number) {
    currentInput += number;
    document.getElementById('display').value = currentInput;
    saveState();
}
function operation(op) {
    if (currentInput === '') return;
    previousInput = currentInput;
    currentInput = '';
    operator = op;
    document.getElementById('display').value = '';
    saveState();
}
function calculate() {
    if (previousInput === '' || currentInput === '') return;
    let result;
    switch (operator) {
        case '+':
            result = parseFloat(previousInput) + parseFloat(currentInput);
            break;
        case '-':
            result = parseFloat(previousInput) - parseFloat(currentInput);
            break;
        case '*':
            result = parseFloat(previousInput) * parseFloat(currentInput);
            break;
        case '/':
            result = parseFloat(previousInput) / parseFloat(currentInput);
            break;
    }
    saveState();
    currentInput = result;
    operator = '';
    previousInput = '';
    document.getElementById('display').value = result;
}
function clearDisplay() {
    currentInput = '';
    operator = '';
    previousInput = '';
    document.getElementById('display').value = '';
    saveState();
}
function saveState() {
    historyStack.push({
        previousInput,
        operator,
        currentInput,
        displayValue: document.getElementById('display').value
    });
}
function undo() {
    if (historyStack.length === 0) return;
    const lastState = historyStack.pop();
    previousInput = lastState.previousInput;
    operator = lastState.operator;
    currentInput = lastState.currentInput;
    document.getElementById('display').value = lastState.displayValue;
}

五、总结

通过上述方法，我们成功实现了一个具有撤销功能的简单计算器。使用栈数据结构保存操作历史、在每次操作时记录状态、在撤销时恢复状态，这些都是实现撤销功能的关键步骤。如果你有更复杂的需求，可以在此基础上进一步扩展和优化。无论是简单的计算器还是复杂的项目管理系统，撤销功能都可以显著提高用户体验和操作安全性。