怎么用js做简易计算机

使用JavaScript制作简易计算器

使用JavaScript制作简易计算器的方法包括：定义HTML结构、编写CSS样式、实现JavaScript逻辑。在这三部分中，JavaScript逻辑是核心部分。详细描述：JavaScript逻辑主要包括按钮点击事件的处理、计算表达式的解析和结果的显示。接下来，我们将逐步探讨如何实现这一功能。

一、定义HTML结构

首先，我们需要一个简单的HTML结构来创建计算器的界面。HTML主要用来定义计算器的按键和显示屏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" disabled />
        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">-</button>
            <button type="button" class="operator" value="*">&times;</button>
            <button type="button" class="operator" value="/">&divide;</button>
            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>
            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>
            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>
            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>
            <button type="button" class="equal-sign" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

然后，我们使用CSS来美化计算器的外观，使其看起来更友好和易于使用。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f9;
    margin: 0;
}
.calculator {
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    width: 400px;
}
.calculator-screen {
    width: 100%;
    height: 80px;
    background-color: #252525;
    color: white;
    border: none;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 2.5em;
}
button {
    height: 60px;
    font-size: 1.5em;
}
.operator {
    background-color: #f9a825;
}
.all-clear {
    background-color: #f44336;
}
.equal-sign {
    background-color: #4caf50;
    height: calc(120px + 2px);
    grid-column: span 2;
}
.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
}

三、实现JavaScript逻辑

最后，我们编写JavaScript代码来实现计算器的功能。主要包括事件处理、表达式解析和结果显示。

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};
function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;
    if (waitingForSecondOperand === true) {
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false;
    } else {
        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}
function inputDecimal(dot) {
    if (calculator.waitingForSecondOperand === true) {
        calculator.displayValue = '0.';
        calculator.waitingForSecondOperand = false;
        return;
    }
    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}
function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue);
    if (operator && calculator.waitingForSecondOperand) {
        calculator.operator = nextOperator;
        return;
    }
    if (firstOperand == null && !isNaN(inputValue)) {
        calculator.firstOperand = inputValue;
    } else if (operator) {
        const result = performCalculation[operator](firstOperand, inputValue);
        calculator.displayValue = String(result);
        calculator.firstOperand = result;
    }
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}
const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
    '=': (firstOperand, secondOperand) => secondOperand
};
function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}
function updateDisplay() {
    const display = document.querySelector('.calculator-screen');
    display.value = calculator.displayValue;
}
updateDisplay();
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
    const { target } = event;
    if (!target.matches('button')) {
        return;
    }
    if (target.classList.contains('operator')) {
        handleOperator(target.value);
        updateDisplay();
        return;
    }
    if (target.classList.contains('decimal')) {
        inputDecimal(target.value);
        updateDisplay();
        return;
    }
    if (target.classList.contains('all-clear')) {
        resetCalculator();
        updateDisplay();
        return;
    }
    inputDigit(target.value);
    updateDisplay();
});

四、详细解释JavaScript逻辑

初始化计算器对象：
- displayValue: 当前显示的值。
- firstOperand: 第一个操作数。
- waitingForSecondOperand: 是否在等待第二个操作数。
- operator: 当前的运算符。
处理数字输入：
- inputDigit(digit): 根据是否在等待第二个操作数来决定如何更新显示值。
处理小数点输入：
- inputDecimal(dot): 确保只有一个小数点被添加到显示值中。
处理运算符：
- handleOperator(nextOperator): 处理运算符输入，包括执行计算和更新状态。
执行计算：
- performCalculation: 一个对象，包含四则运算和赋值运算的实现。
重置计算器：
- resetCalculator(): 将计算器状态重置为初始状态。
更新显示：
- updateDisplay(): 更新显示屏的值。
事件处理：
- 监听按钮点击事件，根据按钮类型调用相应的函数。

五、优化与扩展

为了进一步增强计算器的功能，可以考虑以下几点：

增加更多的运算功能：例如开方、指数运算等。
改善用户体验：通过增加动画效果、按钮按下效果等来提升用户体验。
错误处理：例如处理除零错误等。
响应式设计：使计算器在不同设备和屏幕尺寸下都能良好显示。

六、团队协作与项目管理

如果您正在进行团队协作开发，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个工具能够有效地帮助团队进行任务分配、进度跟踪和沟通协作。

PingCode：专注于研发项目管理，提供需求管理、缺陷管理、测试管理等功能，适合技术开发团队。
Worktile：通用的项目协作软件，适用于各类团队，提供任务管理、时间管理、文档协作等功能。

通过合理使用这些工具，团队成员可以更高效地协作，确保项目按时、高质量地完成。

通过以上步骤，您可以使用JavaScript制作一个功能完备的简易计算器。希望这篇文章能够帮助您理解和实现这一过程。