js计算器代码加减乘除

JavaScript 计算器代码实现加减乘除功能，主要涉及以下几个基础概念：

基础概念

变量：用于存储数据。
函数：封装可重复使用的代码块。
事件监听：响应用户的操作，如点击按钮。
DOM 操作：通过 JavaScript 操作 HTML 元素。

代码示例

以下是一个简单的 JavaScript 计算器实现，包含加减乘除功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>
        .calculator {
            width: 200px;
            margin: auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .display {
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            text-align: right;
            padding: 10px;
            font-size: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .button {
            padding: 20px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" disabled>
        <div class="buttons">
            <div class="button" onclick="clearDisplay()">C</div>
            <div class="button" onclick="appendToDisplay('7')">7</div>
            <div class="button" onclick="appendToDisplay('8')">8</div>
            <div class="button" onclick="appendToDisplay('9')">9</div>
            <div class="button" onclick="appendToDisplay('/')">/</div>
            <div class="button" onclick="appendToDisplay('4')">4</div>
            <div class="button" onclick="appendToDisplay('5')">5</div>
            <div class="button" onclick="appendToDisplay('6')">6</div>
            <div class="button" onclick="appendToDisplay('*')">*</div>
            <div class="button" onclick="appendToDisplay('1')">1</div>
            <div class="button" onclick="appendToDisplay('2')">2</div>
            <div class="button" onclick="appendToDisplay('3')">3</div>
            <div class="button" onclick="appendToDisplay('-')">-</div>
            <div class="button" onclick="appendToDisplay('0')">0</div>
            <div class="button" onclick="appendToDisplay('.')">.</div>
            <div class="button" onclick="calculateResult()">=</div>
            <div class="button" onclick="appendToDisplay('+')">+</div>
        </div>
    </div>

    <script>
        const display = document.getElementById('display');

        function appendToDisplay(value) {
            display.value += value;
        }

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

        function calculateResult() {
            try {
                display.value = eval(display.value);
            } catch (e) {
                display.value = 'Error';
            }
        }
    </script>
</body>
</html>

优势

简单直观：用户界面友好，易于操作。
灵活性：可以通过修改 JavaScript 代码轻松扩展功能。
实时计算：用户输入时即可看到计算结果。

类型

简单计算器：如上例所示，支持基本的四则运算。
科学计算器：包含更多高级数学函数和功能。

应用场景

教育工具：帮助学生练习数学运算。
财务应用：进行简单的财务计算。
日常使用：快速进行数值计算。

可能遇到的问题及解决方法

安全问题：使用 eval 函数可能存在安全风险，因为它会执行传入的字符串作为代码。
- 解决方法：可以使用更安全的解析库，如 math.js，或者自己实现一个简单的表达式解析器。

// 使用 math.js 替代 eval
function calculateResult() {
    try {
        display.value = math.evaluate(display.value);
    } catch (e) {
        display.value = 'Error';
    }
}

精度问题：浮点数运算可能导致精度丢失。
- 解决方法：使用专门的库如 decimal.js 来处理高精度计算。

// 使用 decimal.js 处理高精度计算
const Decimal = require('decimal.js');

function calculateResult() {
    try {
        const expression = display.value.replace(/x/g, '*');
        const result = new Decimal(expression).toNumber();
        display.value = result;
    } catch (e) {
        display.value = 'Error';
    }
}

通过以上方法，可以有效提升计算器的安全性和准确性。