当前位置：首页 > JavaScript

js实现简单计算器

2026-03-01 07:25:12JavaScript

实现简单计算器的基本结构

使用HTML和JavaScript可以快速构建一个基础计算器。以下是一个实现方案，包含数字输入、加减乘除运算和结果显示功能。

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        #calculator {
            width: 200px;
            margin: 50px auto;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        #display {
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            text-align: right;
        }
        button {
            width: 40px;
            height: 40px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div>
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('/')">/</button>
        </div>
        <div>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('*')">*</button>
        </div>
        <div>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('-')">-</button>
        </div>
        <div>
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendToDisplay('+')">+</button>
        </div>
        <div>
            <button onclick="clearDisplay()" style="width: 100px;">C</button>
        </div>
    </div>

    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

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

        function calculate() {
            try {
                const result = eval(document.getElementById('display').value);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
    </script>
</body>
</html>

功能扩展与改进

上述基础实现可以进一步优化和扩展：

// 改进计算函数，增加输入验证
function calculate() {
    const input = document.getElementById('display').value;
    if (!input) return;

    try {
        // 替换×为*，÷为/，兼容不同符号
        const expression = input.replace(/×/g, '*').replace(/÷/g, '/');
        // 使用Function构造器替代eval更安全
        const result = new Function('return ' + expression)();
        document.getElementById('display').value = result;
    } catch {
        document.getElementById('display').value = 'Error';
    }
}

// 添加键盘支持
document.addEventListener('keydown', function(event) {
    const key = event.key;
    if (/[0-9\.\+\-\*\/]/.test(key)) {
        appendToDisplay(key);
    } else if (key === 'Enter') {
        calculate();
    } else if (key === 'Escape') {
        clearDisplay();
    }
});

使用模块化设计

对于更复杂的计算器，可以采用面向对象的方式：

class Calculator {
    constructor() {
        this.currentInput = '';
        this.previousInput = '';
        this.operation = null;
    }

    appendNumber(number) {
        this.currentInput = this.currentInput.toString() + number.toString();
    }

    chooseOperation(op) {
        if (this.currentInput === '') return;
        if (this.previousInput !== '') {
            this.compute();
        }
        this.operation = op;
        this.previousInput = this.currentInput;
        this.currentInput = '';
    }

    compute() {
        let computation;
        const prev = parseFloat(this.previousInput);
        const current = parseFloat(this.currentInput);
        if (isNaN(prev) || isNaN(current)) return;

        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '*':
                computation = prev * current;
                break;
            case '/':
                computation = prev / current;
                break;
            default:
                return;
        }
        this.currentInput = computation;
        this.operation = null;
        this.previousInput = '';
    }

    clear() {
        this.currentInput = '';
        this.previousInput = '';
        this.operation = null;
    }
}