当前位置：首页 > JavaScript

js实现计算器连续加减

2026-01-31 11:30:20JavaScript

js实现计算器连续加减

实现思路

要实现一个支持连续加减的JavaScript计算器，关键在于实时解析用户输入的表达式并动态计算结果。可以通过事件监听和表达式解析来完成。

核心代码示例

// 获取DOM元素
const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');

let currentInput = '';
let result = 0;

// 为每个按钮添加点击事件
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;

        if (value === '=') {
            // 计算最终结果
            try {
                result = eval(currentInput);
                display.value = result;
                currentInput = result.toString();
            } catch (error) {
                display.value = 'Error';
                currentInput = '';
            }
        } else if (value === 'C') {
            // 清除所有内容
            currentInput = '';
            result = 0;
            display.value = '';
        } else {
            // 追加输入并实时计算
            currentInput += value;
            display.value = currentInput;

            // 实时计算（可选）
            try {
                const tempResult = eval(currentInput);
                if (!isNaN(tempResult)) {
                    result = tempResult;
                }
            } catch {}
        }
    });
});

功能说明

实时表达式构建：用户每次点击数字或运算符按钮时，将内容追加到currentInput字符串中。
错误处理：使用try-catch捕获可能的表达式错误。
连续计算：通过eval()函数直接解析数学表达式字符串。
清零功能：C按钮清除所有历史记录。

注意事项

eval()存在安全风险，在生产环境中建议使用更安全的表达式解析库。
对于复杂表达式，需要添加更多验证逻辑。
可扩展支持更多运算符（乘除、括号等）。

完整HTML示例

<!DOCTYPE html>
<html>
<head>
    <title>连续加减计算器</title>
    <style>
        #display {
            width: 200px;
            margin-bottom: 10px;
            text-align: right;
        }
        button {
            width: 50px;
            height: 50px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <input type="text" id="display" readonly>
    <div>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>+</button>
    </div>
    <div>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>-</button>
    </div>
    <div>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>=</button>
    </div>
    <div>
        <button>C</button>
        <button>0</button>
    </div>

    <script>
        // 上述JavaScript代码放在这里
    </script>
</body>
</html>