js怎么制作简易计算器

JS怎么制作简易计算器

制作一个简易计算器，首先需要理解HTML结构、掌握CSS样式、编写JavaScript逻辑。其中，JavaScript是核心，通过监听按钮点击事件，实现计算功能。

一、理解HTML结构

HTML的结构主要用于定义计算器的外观和布局。一个简易的计算器包含显示屏和多个按钮。我们可以使用<div>标签来创建这些元素，并通过CSS进行样式化。

1. 定义显示屏和按钮

在HTML中，创建一个用于显示结果的<input>元素和若干个<button>元素。示例如下：

<!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" 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="*">*</button>
            <button type="button" class="operator" value="/">/</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="scripts.js"></script>
</body>
</html>

二、掌握CSS样式

为了使计算器更美观，可以使用CSS进行样式化。以下是一个基本的样式示例：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
.calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding: 20px;
    font-size: 2.5rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.calculator-keys button {
    height: 60px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-size: 1.5rem;
    cursor: pointer;
}
.calculator-keys button.operator {
    background-color: #ff9500;
    color: white;
}
.calculator-keys button.all-clear {
    background-color: #ff3b30;
    color: white;
}
.calculator-keys button.equal-sign {
    background-color: #4cd964;
    color: white;
    height: calc(60px * 2);
}

三、编写JavaScript逻辑

JavaScript是实现计算器功能的核心部分。我们需要监听按钮点击事件，并根据用户输入进行相应的计算。

1. 定义全局变量和选择元素

首先，定义一些全局变量来存储用户输入和选择HTML元素。

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};
const display = document.querySelector('.calculator-screen');
const keys = document.querySelector('.calculator-keys');

2. 更新显示屏函数

编写一个函数来更新显示屏的内容。

function updateDisplay() {
    display.value = calculator.displayValue;
}
updateDisplay();

3. 处理按钮点击事件

监听按钮点击事件并调用相应的处理函数。

keys.addEventListener('click', (event) => {
    const { target } = event;
    const { value } = target;
    if (!target.matches('button')) {
        return;
    }
    switch (value) {
        case '+':
        case '-':
        case '*':
        case '/':
            handleOperator(value);
            break;
        case '.':
            inputDecimal(value);
            break;
        case 'all-clear':
            resetCalculator();
            break;
        case '=':
            handleEqualSign();
            break;
        default:
            if (Number.isInteger(parseFloat(value))) {
                inputDigit(value);
            }
    }
    updateDisplay();
});

4. 输入数字

编写一个函数处理数字输入。

function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;
    if (waitingForSecondOperand === true) {
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false;
    } else {
        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}

5. 输入小数点

编写一个函数处理小数点输入。

function inputDecimal(dot) {
    if (calculator.waitingForSecondOperand === true) {
        calculator.displayValue = '0.'
        calculator.waitingForSecondOperand = false;
        return;
    }
    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}

6. 处理操作符

编写一个函数处理操作符。

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 = calculate(firstOperand, inputValue, operator);
        calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
        calculator.firstOperand = result;
    }
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}
function calculate(firstOperand, secondOperand, operator) {
    if (operator === '+') {
        return firstOperand + secondOperand;
    } else if (operator === '-') {
        return firstOperand - secondOperand;
    } else if (operator === '*') {
        return firstOperand * secondOperand;
    } else if (operator === '/') {
        return firstOperand / secondOperand;
    }
    return secondOperand;
}

7. 处理等号

编写一个函数处理等号点击事件。

function handleEqualSign() {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue);
    if (operator && calculator.waitingForSecondOperand) {
        calculator.displayValue = calculate(firstOperand, inputValue, operator).toString();
        calculator.firstOperand = null;
        calculator.operator = null;
        calculator.waitingForSecondOperand = false;
    }
}

8. 重置计算器

编写一个函数重置计算器。

function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
    updateDisplay();
}

四、总结

通过上面的步骤，我们已经创建了一个简易的计算器。HTML定义结构、CSS样式化页面、JavaScript实现逻辑，每一步都至关重要。通过这个项目，大家不仅能掌握基本的前端知识，还能进一步理解如何将这些技术结合起来应用到实际项目中。

对于团队项目管理和协作，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高效率。这些工具可以帮助团队更好地管理任务、跟踪进度、协作开发，确保项目顺利进行。

希望本文对你有帮助，祝你在前端开发的道路上越走越远！