当前位置：首页 > JavaScript

在线计算器js实现

2026-01-31 07:17:11JavaScript

实现基础计算器功能

创建一个简单的HTML文件，包含数字按钮、运算符按钮和显示区域。使用JavaScript处理按钮点击事件并执行计算。

<!DOCTYPE html>
<html>
<head>
    <title>在线计算器</title>
    <style>
        .calculator {
            width: 200px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #display {
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            text-align: right;
            font-size: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 5px;
        }
        button {
            height: 40px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('/')">/</button>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('*')">*</button>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('-')">-</button>
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendToDisplay('+')">+</button>
            <button onclick="clearDisplay()">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>

增强计算器安全性

使用eval函数存在安全风险，可以替换为更安全的解析方式。创建一个函数来解析数学表达式。

function calculate() {
    const expression = document.getElementById('display').value;
    try {
        const tokens = expression.match(/(\d+\.?\d*)|([+\-*/])/g);
        if (!tokens) return;

        let result = parseFloat(tokens[0]);
        for (let i = 1; i < tokens.length; i += 2) {
            const operator = tokens[i];
            const operand = parseFloat(tokens[i+1]);

            switch (operator) {
                case '+': result += operand; break;
                case '-': result -= operand; break;
                case '*': result *= operand; break;
                case '/': result /= operand; break;
                default: throw new Error('Invalid operator');
            }
        }
        document.getElementById('display').value = result;
    } catch (error) {
        document.getElementById('display').value = 'Error';
    }
}

添加高级计算功能

扩展计算器功能，支持平方根、幂运算等高级功能。

<button onclick="squareRoot()">√</button>
<button onclick="power()">^</button>
<button onclick="percentage()">%</button>

<script>
    function squareRoot() {
        const value = parseFloat(document.getElementById('display').value);
        if (value >= 0) {
            document.getElementById('display').value = Math.sqrt(value);
        } else {
            document.getElementById('display').value = 'Error';
        }
    }

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

    function percentage() {
        const value = parseFloat(document.getElementById('display').value);
        document.getElementById('display').value = value / 100;
    }
</script>

支持键盘输入

添加事件监听器，允许用户通过键盘输入数字和运算符。

document.addEventListener('keydown', function(event) {
    if (/[0-9+\-*/.=]/.test(event.key)) {
        if (event.key === '=' || event.key === 'Enter') {
            calculate();
        } else {
            appendToDisplay(event.key);
        }
    } else if (event.key === 'Escape') {
        clearDisplay();
    } else if (event.key === 'Backspace') {
        const display = document.getElementById('display');
        display.value = display.value.slice(0, -1);
    }
});

添加记忆功能

实现记忆存储和读取功能，增强用户体验。

<button onclick="memoryStore()">MS</button>
<button onclick="memoryRecall()">MR</button>
<button onclick="memoryClear()">MC</button>

<script>
    let memory = 0;

    function memoryStore() {
        const value = document.getElementById('display').value;
        if (value && !isNaN(value)) {
            memory = parseFloat(value);
        }
    }

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

    function memoryClear() {
        memory = 0;
    }
</script>

处理连续运算

改进计算逻辑，支持连续运算而不需要每次都按等号。

在线计算器js实现

let lastOperation = null;
let firstOperand = null;

function handleOperation(operation) {
    const currentValue = parseFloat(document.getElementById('display').value);

    if (firstOperand === null) {
        firstOperand = currentValue;
    } else if (lastOperation) {
        firstOperand = performCalculation(firstOperand, currentValue, lastOperation);
        document.getElementById('display').value = firstOperand;
    }

    lastOperation = operation;
    document.getElementById('display').value = '';
}

function performCalculation(a, b, op) {
    switch (op) {
        case '+': return a + b;
        case '-': return a - b;
        case '*': return a * b;
        case '/': return a / b;
        default: return b;
    }
}

function calculate() {
    const currentValue = parseFloat(document.getElementById('display').value);
    if (firstOperand !== null && lastOperation) {
        const result = performCalculation(firstOperand, currentValue, lastOperation);
        document.getElementById('display').value = result;
        firstOperand = result;
        lastOperation = null;
    }
}