js实现计算器

实现基础计算器功能

使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例：

let currentInput = '0';
let previousInput = '';
let operation = null;
let resetScreen = false;

const display = document.getElementById('display');

function updateDisplay() {
    display.value = currentInput;
}

document.querySelectorAll('.number').forEach(button => {
    button.addEventListener('click', () => {
        if (currentInput === '0' || resetScreen) {
            currentInput = '';
            resetScreen = false;
        }
        currentInput += button.textContent;
        updateDisplay();
    });
});

document.querySelectorAll('.operator').forEach(button => {
    button.addEventListener('click', () => {
        if (operation !== null) calculate();
        previousInput = currentInput;
        operation = button.textContent;
        resetScreen = true;
    });
});

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);

    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            result = prev / current;
            break;
        default:
            return;
    }

    currentInput = result.toString();
    operation = null;
    updateDisplay();
}

document.getElementById('equals').addEventListener('click', () => {
    calculate();
});

document.getElementById('clear').addEventListener('click', () => {
    currentInput = '0';
    previousInput = '';
    operation = null;
    updateDisplay();
});

对应HTML结构

计算器需要基本的HTML结构来容纳按钮和显示区域：

<div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">/</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator">*</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator">-</button>
        <button class="number">0</button>
        <button id="clear">C</button>
        <button id="equals">=</button>
        <button class="operator">+</button>
    </div>
</div>

添加CSS样式

基础样式可以提升计算器的视觉体验：

.calculator {
    width: 200px;
    margin: 0 auto;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 10px;
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 18px;
    text-align: right;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background: #ddd;
    cursor: pointer;
}

button:hover {
    background: #ccc;
}

扩展功能实现

要实现更高级的计算器功能，可以考虑添加以下特性：

// 小数点功能
document.getElementById('decimal').addEventListener('click', () => {
    if (resetScreen) {
        currentInput = '0.';
        resetScreen = false;
    } else if (!currentInput.includes('.')) {
        currentInput += '.';
    }
    updateDisplay();
});

// 百分比功能
document.getElementById('percent').addEventListener('click', () => {
    currentInput = (parseFloat(currentInput) / 100).toString();
    updateDisplay();
});

// 正负号切换
document.getElementById('toggle-sign').addEventListener('click', () => {
    currentInput = (parseFloat(currentInput) * -1).toString();
    updateDisplay();
});

处理键盘输入

为提升用户体验，可以添加键盘支持：

document.addEventListener('keydown', (e) => {
    if (e.key >= '0' && e.key <= '9') {
        if (currentInput === '0' || resetScreen) {
            currentInput = '';
            resetScreen = false;
        }
        currentInput += e.key;
        updateDisplay();
    } else if (['+', '-', '*', '/'].includes(e.key)) {
        if (operation !== null) calculate();
        previousInput = currentInput;
        operation = e.key;
        resetScreen = true;
    } else if (e.key === '.' && !currentInput.includes('.')) {
        currentInput += '.';
        updateDisplay();
    } else if (e.key === 'Enter' || e.key === '=') {
        calculate();
    } else if (e.key === 'Escape') {
        currentInput = '0';
        previousInput = '';
        operation = null;
        updateDisplay();
    }
});

错误处理

添加基本错误处理防止计算异常：

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);

    if (isNaN(prev) || isNaN(current)) return;

    try {
        switch (operation) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                if (current === 0) {
                    currentInput = 'Error';
                    operation = null;
                    updateDisplay();
                    return;
                }
                result = prev / current;
                break;
            default:
                return;
        }

        currentInput = result.toString();
        operation = null;
        updateDisplay();
    } catch (e) {
        currentInput = 'Error';
        updateDisplay();
    }
}