怎么用js做个简单的计算器

使用JavaScript制作简单计算器的方法

要制作一个简单的计算器，可以使用JavaScript、HTML和CSS。 JavaScript负责计算逻辑，HTML构建用户界面，CSS用于样式装饰。下面我们将详细介绍如何实现一个简单的计算器。

一、准备工作

在开始编码之前，确保你有一个基本的开发环境，可以是任何文本编辑器（如VS Code、Sublime Text）和一个浏览器（如Chrome、Firefox）。

二、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>Simple 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 operator" 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: #f4f4f4;
    font-family: 'Roboto', sans-serif;
}
.calculator {
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
.calculator-screen {
    width: 100%;
    height: 80px;
    background-color: #252525;
    border: none;
    color: white;
    text-align: right;
    padding: 0 20px;
    font-size: 2.5rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-sizing: border-box;
}
.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
button {
    height: 60px;
    font-size: 1.5rem;
    border: none;
    border-radius: 8px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #d8d8d8;
}
.operator {
    background-color: #ff9500;
    color: white;
}
.operator:hover {
    background-color: #e68900;
}
.all-clear {
    background-color: #ff3b30;
    color: white;
}
.all-clear:hover {
    background-color: #e22e24;
}
.equal-sign {
    background-color: #4cd964;
    color: white;
    grid-column: span 2;
}
.equal-sign:hover {
    background-color: #3bc152;
}

四、JavaScript实现计算逻辑

最后，我们编写JavaScript来实现计算器的核心逻辑：

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    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;
    const { value } = target;
    if (!target.matches('button')) {
        return;
    }
    switch (value) {
        case '+':
        case '-':
        case '*':
        case '/':
        case '=':
            handleOperator(value);
            break;
        case '.':
            inputDecimal(value);
            break;
        case 'all-clear':
            resetCalculator();
            break;
        default:
            if (Number.isInteger(parseFloat(value))) {
                inputDigit(value);
            }
    }
    updateDisplay();
});
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 = 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;
}
function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}

五、功能详解

1、HTML部分

HTML部分定义了计算器的基本结构，包括显示屏和按钮。每个按钮都有一个value属性，用于在JavaScript中识别它们。

2、CSS部分

CSS部分定义了计算器的外观，包括按钮的样式、显示屏的样式，以及按钮在悬停时的效果。

3、JavaScript部分

JavaScript部分是计算器的核心逻辑：

calculator对象：用于存储计算器的当前状态。
updateDisplay函数：更新显示屏的值。
keys.addEventListener：监听按钮点击事件，并根据按钮的value调用相应的处理函数。
inputDigit函数：处理数字按钮点击事件。
inputDecimal函数：处理小数点按钮点击事件。
handleOperator函数：处理运算符按钮点击事件。
calculate函数：执行基本的算术运算。
resetCalculator函数：重置计算器的状态。

六、总结

通过上述步骤，我们创建了一个功能齐全的简单计算器。这个过程涉及了HTML、CSS和JavaScript的基本知识，并展示了如何将它们结合在一起构建一个完整的应用程序。希望这个教程对你有所帮助，如果有任何问题，欢迎随时交流。