怎么用js弄一个计算器

如何用JavaScript制作一个计算器

要用JavaScript制作一个计算器，核心思路包括创建用户界面、实现按键交互、进行运算处理。这些步骤分别通过HTML、CSS和JavaScript来实现。以下将详细介绍如何完成这些步骤。

一、用户界面设计

首先，需要创建一个基本的用户界面。我们可以使用HTML和CSS来实现一个简单但功能齐全的计算器界面。

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" 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部分

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}
.calculator {
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    width: 400px;
}
.calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #252525;
    color: white;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 3rem;
}
button {
    height: 60px;
    font-size: 2rem!important;
}
button.operator {
    background-color: #FF9500;
    color: white;
}
button.equal-sign {
    background-color: #FF9500;
    color: white;
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;
}
button.all-clear {
    background-color: #FF3B30;
    color: white;
}
.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    background-color: #252525;
}

二、实现按键交互

接下来，我们需要使用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) 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();
});

三、详解步骤

1、创建用户界面

创建用户界面是制作计算器的第一步。通过HTML和CSS，我们可以定义计算器的基本结构和样式。HTML部分主要包括一个显示屏和多个按钮，每个按钮都有相应的值和类型。CSS部分则用于美化计算器，使其看起来更专业和用户友好。

2、实现按键交互

实现按键交互是计算器功能的核心。这部分主要通过JavaScript来完成。我们需要定义一个calculator对象来存储计算器的当前状态，包括显示值、操作数和运算符等。然后，通过一系列函数（如inputDigit、inputDecimal、handleOperator和resetCalculator等）来处理用户的输入。

3、进行运算处理

进行运算处理是计算器的关键功能。我们定义了一个performCalculation对象，其中包括基本的四则运算（加、减、乘、除）和等号操作。handleOperator函数根据用户输入的运算符来调用相应的运算函数，并更新计算器的状态。

4、更新显示

更新显示是为了让用户实时看到计算结果。我们通过updateDisplay函数来更新显示屏的内容。每当用户点击按钮时，都会调用这个函数来刷新显示屏。

四、进一步优化

1、错误处理

可以增加错误处理机制，如除以零时显示错误信息。

2、复杂运算支持

可以扩展支持更多的数学运算，如平方根、幂运算等。

3、用户体验优化

可以通过CSS进一步优化样式，使计算器更加美观和易用。

五、项目管理

在开发过程中，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile来进行项目管理和团队协作。这些工具可以帮助团队更好地分工协作，提高开发效率。

通过以上步骤，我们可以用JavaScript制作一个功能齐全的计算器。这个过程不仅帮助我们理解了计算器的工作原理，也提高了我们的编程技能。希望本文对你有所帮助。