js怎么编写计算器

如何使用JavaScript编写计算器

使用JavaScript编写计算器的核心在于操作DOM、处理用户输入、实现基本算术运算。下面我们将详细讲解如何编写一个简单但功能齐全的计算器。

一、操作DOM

首先，我们需要创建一个HTML页面来展示我们的计算器界面。DOM操作指的是JavaScript与HTML元素的互动。通过DOM操作，我们可以捕捉用户在页面上的操作，并做出相应的反应。

创建HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calculator</title>
    <style>
        /* 在这里添加CSS样式 */
        .calculator {
            width: 200px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
        }
        .display {
            width: 180px;
            height: 40px;
            margin-bottom: 10px;
        }
        .button {
            width: 40px;
            height: 40px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" disabled>
        <br>
        <button class="button" onclick="appendNumber('1')">1</button>
        <button class="button" onclick="appendNumber('2')">2</button>
        <button class="button" onclick="appendNumber('3')">3</button>
        <button class="button" onclick="setOperation('+')">+</button>
        <br>
        <button class="button" onclick="appendNumber('4')">4</button>
        <button class="button" onclick="appendNumber('5')">5</button>
        <button class="button" onclick="appendNumber('6')">6</button>
        <button class="button" onclick="setOperation('-')">-</button>
        <br>
        <button class="button" onclick="appendNumber('7')">7</button>
        <button class="button" onclick="appendNumber('8')">8</button>
        <button class="button" onclick="appendNumber('9')">9</button>
        <button class="button" onclick="setOperation('*')">*</button>
        <br>
        <button class="button" onclick="clearDisplay()">C</button>
        <button class="button" onclick="appendNumber('0')">0</button>
        <button class="button" onclick="calculateResult()">=</button>
        <button class="button" onclick="setOperation('/')">/</button>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

在上面的HTML中，我们创建了一个简单的计算器界面，包括数字按钮、操作符按钮和显示区域。

操作DOM的JavaScript代码

接下来，我们将编写操作这些按钮和显示区域的JavaScript代码。

let display = document.getElementById('display');
let currentNumber = '';
let previousNumber = '';
let operation = null;
function appendNumber(number) {
    currentNumber += number;
    display.value = currentNumber;
}
function setOperation(op) {
    if (currentNumber === '') return;
    if (previousNumber !== '') {
        calculateResult();
    }
    operation = op;
    previousNumber = currentNumber;
    currentNumber = '';
}
function calculateResult() {
    let result;
    const prev = parseFloat(previousNumber);
    const current = parseFloat(currentNumber);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            result = prev / current;
            break;
        default:
            return;
    }
    currentNumber = result;
    operation = undefined;
    previousNumber = '';
    display.value = result;
}
function clearDisplay() {
    currentNumber = '';
    previousNumber = '';
    operation = null;
    display.value = '';
}

二、处理用户输入

处理用户输入是实现计算器的关键部分。我们需要处理数字和操作符的输入，并在适当的时候进行计算。

处理数字输入

在appendNumber函数中，我们将用户输入的数字追加到当前数字字符串中，并更新显示区域。

处理操作符输入

在setOperation函数中，我们首先检查当前数字是否为空。如果不为空，我们将计算上一个操作的结果。然后，我们设置当前的操作符，并将当前数字保存为上一个数字。

计算结果

在calculateResult函数中，我们将上一个数字和当前数字转换为浮点数，并根据操作符进行相应的计算。最后，我们更新显示区域和相关变量。

三、实现基本算术运算

我们在calculateResult函数中使用switch语句来实现基本的算术运算，包括加法、减法、乘法和除法。

加法

result = prev + current;

减法

result = prev - current;

乘法

result = prev * current;

除法

result = prev / current;

四、增强功能

为了提高用户体验，我们可以添加一些额外的功能，如键盘输入支持、小数点输入和负数处理。

键盘输入支持

我们可以通过添加键盘事件监听器来实现键盘输入支持。

document.addEventListener('keydown', function(event) {
    const key = event.key;
    if (!isNaN(key)) {
        appendNumber(key);
    } else if (key === '+') {
        setOperation('+');
    } else if (key === '-') {
        setOperation('-');
    } else if (key === '*') {
        setOperation('*');
    } else if (key === '/') {
        setOperation('/');
    } else if (key === 'Enter') {
        calculateResult();
    } else if (key === 'Escape') {
        clearDisplay();
    }
});

小数点输入

在appendNumber函数中，我们可以添加对小数点的处理。

function appendNumber(number) {
    if (number === '.' && currentNumber.includes('.')) return;
    currentNumber += number;
    display.value = currentNumber;
}

负数处理

我们可以添加一个按钮来切换当前数字的正负号。

<button class="button" onclick="toggleSign()">±</button>

function toggleSign() {
    if (currentNumber === '') return;
    currentNumber = (parseFloat(currentNumber) * -1).toString();
    display.value = currentNumber;
}

五、总结

通过上述步骤，我们已经成功实现了一个功能齐全的JavaScript计算器。操作DOM、处理用户输入、实现基本算术运算是核心步骤。在此基础上，我们还可以根据需求添加更多的功能和优化，提升用户体验。

编写计算器不仅是一个有趣的项目，也是学习JavaScript的一个很好途径。希望这篇文章能帮助你更好地理解JavaScript编程，并激发你进一步探索更多的编程技巧和项目。如果在团队项目中需要更加专业的项目管理工具，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile。