在JS中怎么制作一个简单的计算器

在JS中制作一个简单的计算器的方法包括：使用HTML创建用户界面、使用CSS美化界面、使用JavaScript实现计算逻辑。在本文中，我们将详细介绍如何从头开始制作一个简单的计算器，包括每个步骤的具体代码和解释。

一、创建用户界面

使用HTML创建用户界面是制作计算器的第一步。我们需要创建一个显示屏和一些按钮来表示数字和操作符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div id="display" class="display">0</div>
        <div class="buttons">
            <button class="btn" data-num="7">7</button>
            <button class="btn" data-num="8">8</button>
            <button class="btn" data-num="9">9</button>
            <button class="btn" data-op="/">/</button>
            <button class="btn" data-num="4">4</button>
            <button class="btn" data-num="5">5</button>
            <button class="btn" data-num="6">6</button>
            <button class="btn" data-op="*">*</button>
            <button class="btn" data-num="1">1</button>
            <button class="btn" data-num="2">2</button>
            <button class="btn" data-num="3">3</button>
            <button class="btn" data-op="-">-</button>
            <button class="btn" data-num="0">0</button>
            <button class="btn" data-op=".">.</button>
            <button class="btn" data-op="=">=</button>
            <button class="btn" data-op="+">+</button>
            <button class="btn" id="clear">C</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、美化界面

使用CSS美化计算器界面，使其更直观和美观。

* {
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
.display {
    font-size: 2rem;
    padding: 10px;
    background-color: #222;
    color: #fff;
    text-align: right;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    padding: 20px;
    font-size: 1.5rem;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #e9e9e9;
}
#clear {
    grid-column: span 4;
    background-color: #ff6666;
    color: #fff;
}
#clear:hover {
    background-color: #ff4d4d;
}

三、实现计算逻辑

使用JavaScript实现计算器的核心逻辑，包括按钮点击事件处理和计算结果的显示。

document.addEventListener('DOMContentLoaded', function () {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('.btn');
    let currentInput = '';
    let currentOperation = '';
    let firstOperand = null;
    let secondOperand = null;
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const buttonText = this.textContent;
            if (this.id === 'clear') {
                currentInput = '';
                currentOperation = '';
                firstOperand = null;
                secondOperand = null;
                display.textContent = '0';
                return;
            }
            if (this.dataset.num) {
                if (currentInput === '' && buttonText === '0') {
                    return;
                }
                currentInput += buttonText;
                display.textContent = currentInput;
            }
            if (this.dataset.op) {
                if (buttonText === '=') {
                    secondOperand = parseFloat(currentInput);
                    if (firstOperand !== null && secondOperand !== null) {
                        switch (currentOperation) {
                            case '+':
                                currentInput = (firstOperand + secondOperand).toString();
                                break;
                            case '-':
                                currentInput = (firstOperand - secondOperand).toString();
                                break;
                            case '*':
                                currentInput = (firstOperand * secondOperand).toString();
                                break;
                            case '/':
                                currentInput = (firstOperand / secondOperand).toString();
                                break;
                        }
                        display.textContent = currentInput;
                        firstOperand = null;
                        secondOperand = null;
                        currentOperation = '';
                    }
                } else {
                    if (currentInput !== '') {
                        firstOperand = parseFloat(currentInput);
                        currentInput = '';
                    }
                    currentOperation = buttonText;
                }
            }
        });
    });
});

四、详细解析计算逻辑

1、绑定事件处理器

我们在页面加载后通过document.addEventListener('DOMContentLoaded', function () { ... })确保DOM完全加载后绑定按钮点击事件处理器。这确保了在绑定事件处理器之前，所有的按钮元素都已存在于DOM中。

2、处理数字输入

在每个按钮点击事件中，我们首先检查按钮是否包含data-num属性。若存在，说明这是一个数字按钮。我们将按钮的文本内容添加到currentInput字符串中，并更新显示屏的内容。为了避免在计算器初始状态下输入多个零，我们添加了一个检查，确保只有在currentInput非空的情况下才允许添加零。

3、处理操作符输入

当按钮包含data-op属性时，我们需要处理操作符输入。如果按下的是等号（=），我们将执行计算，并根据当前的操作符执行相应的算术运算。若当前操作符为+，我们将执行加法，若为-，则执行减法，以此类推。计算结果将被更新到currentInput中，并显示在屏幕上。

4、处理清除操作

当按下清除按钮（C）时，我们需要重置所有状态变量，包括currentInput、currentOperation、firstOperand和secondOperand，并将显示屏内容重置为0。

五、处理更多复杂情况

1、处理连续操作

在当前的实现中，如果用户连续按下操作符按钮，我们需要确保在上一个操作完成后，继续进行下一个操作。例如，输入5 + 3 * 2应得到正确的结果。为此，我们需要在每次操作符输入时，检查currentInput是否非空，并在非空时将其转换为浮点数并存储到firstOperand。

2、处理小数点

为了处理小数点输入，我们可以在数字按钮处理部分添加一个额外的检查，确保小数点只被添加一次。可以通过检查currentInput中是否已经包含小数点来实现。

3、处理除以零

在处理除法操作时，我们需要添加一个检查，确保除数不为零。如果用户尝试除以零，我们可以显示一个错误信息，或者简单地忽略这个操作。

六、总结

通过本文，我们详细介绍了如何使用HTML、CSS和JavaScript制作一个简单的计算器。我们从创建用户界面开始，逐步实现了计算器的核心计算逻辑，并讨论了如何处理更复杂的情况。希望这篇文章能帮助你理解计算器的实现过程，并为你提供一个参考示例。

如果你在团队中进行项目协作，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile来提高效率和协作质量。这些工具可以帮助你更好地管理项目进度、分配任务和跟踪问题，使你的开发过程更加顺畅和高效。