js怎么写一个计算机

JavaScript 如何编写一个简单的计算器

通过基本的 JavaScript 操作符、函数、事件监听和 DOM 操作，可以轻松实现一个简单的计算器。 要实现这个功能，我们需要创建一个包含数字按钮、操作符按钮和显示屏的 HTML 结构，并使用 JavaScript 来处理用户的输入和计算逻辑。下面将详细解释如何一步一步实现这一目标。

一、创建基本的 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>
    <style>
        /* 简单的样式来美化计算器 */
        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            max-width: 400px;
            margin: 100px auto;
            gap: 10px;
        }
        .display {
            grid-column: span 4;
            height: 50px;
            text-align: right;
            padding: 10px;
            background: #f2f2f2;
        }
        button {
            padding: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <button class="btn">7</button>
        <button class="btn">8</button>
        <button class="btn">9</button>
        <button class="btn operator">/</button>
        <button class="btn">4</button>
        <button class="btn">5</button>
        <button class="btn">6</button>
        <button class="btn operator">*</button>
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn operator">-</button>
        <button class="btn">0</button>
        <button class="btn">.</button>
        <button class="btn">C</button>
        <button class="btn operator">+</button>
        <button class="btn operator" id="equals">=</button>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

二、编写 JavaScript 逻辑

接下来，我们将编写 JavaScript 逻辑来处理用户输入和计算。

// 获取显示屏元素
const display = document.getElementById('display');
// 初始化计算器状态
let currentInput = '0';
let previousInput = null;
let operator = null;
// 更新显示屏
function updateDisplay() {
    display.innerText = currentInput;
}
// 处理数字按钮点击
function handleNumber(num) {
    if (currentInput === '0') {
        currentInput = num;
    } else {
        currentInput += num;
    }
    updateDisplay();
}
// 处理操作符按钮点击
function handleOperator(op) {
    if (operator !== null) {
        calculate();
    }
    previousInput = currentInput;
    currentInput = '0';
    operator = op;
}
// 执行计算
function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    switch (operator) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operator = null;
    previousInput = null;
    updateDisplay();
}
// 处理清除按钮点击
function handleClear() {
    currentInput = '0';
    previousInput = null;
    operator = null;
    updateDisplay();
}
// 处理等号按钮点击
function handleEquals() {
    if (operator !== null) {
        calculate();
    }
}
// 添加事件监听
document.querySelectorAll('.btn').forEach(button => {
    button.addEventListener('click', () => {
        const value = button.innerText;
        if (!isNaN(value) || value === '.') {
            handleNumber(value);
        } else if (value === 'C') {
            handleClear();
        } else if (value === '=') {
            handleEquals();
        } else {
            handleOperator(value);
        }
    });
});

三、详细解释与优化

1、初始化和更新显示屏

我们首先获取显示屏的 DOM 元素，并使用 currentInput 变量来保存当前输入的值。每次用户输入数字或操作符时，我们都会更新显示屏。

2、处理数字输入

handleNumber 函数处理数字按钮的点击事件。如果当前输入为 '0'，则将其替换为用户输入的数字；否则，将用户输入的数字追加到当前输入的末尾。

3、处理操作符输入

handleOperator 函数处理操作符按钮的点击事件。如果之前已经有操作符，我们会先进行计算，然后保存当前输入和操作符。

4、执行计算

calculate 函数根据当前操作符执行相应的计算，并将结果显示在显示屏上。我们使用 parseFloat 将字符串转换为浮点数进行计算，然后将结果转换回字符串保存。

5、清除输入

handleClear 函数重置计算器的状态，清除当前输入、之前的输入和操作符。

6、处理等号按钮

handleEquals 函数在用户点击等号按钮时执行计算，显示结果。

四、添加更多功能和优化

虽然我们已经实现了一个基本的计算器，但我们还可以添加更多功能和进行优化。例如：

键盘输入支持：添加对键盘输入的支持，使用户可以使用键盘进行操作。
链式计算：允许用户进行连续的计算，而无需每次按等号。
处理错误：例如，处理除以零的情况，显示错误消息。

五、总结

通过这篇文章，我们详细介绍了如何使用 JavaScript 创建一个简单的计算器。从基本的 HTML 结构到核心的 JavaScript 逻辑，再到进一步的功能扩展和优化，我们一步一步地实现了这个功能。希望这篇文章能帮助你更好地理解 JavaScript 的基本操作和事件处理。如果你有任何问题或建议，欢迎留言讨论。