用js怎么写计算机的器

用JavaScript编写计算器的步骤详解

使用JavaScript编写计算机的器，可以通过以下步骤：定义HTML结构、编写CSS样式、编写JavaScript逻辑。 在这三步中，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>JavaScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display"></div>
        <div class="buttons">
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn" data-value="/">/</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn" data-value="*">*</button>
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn" data-value="-">-</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn" data-value="=">=</button>
            <button class="btn" data-value="+">+</button>
            <button class="btn" data-value="C">C</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

接下来，我们需要为计算器编写CSS样式，使其看起来美观。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f5f5f5;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
}
.display {
    background-color: #222;
    color: #fff;
    font-size: 2em;
    padding: 10px;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 1.5em;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #f0f0f0;
}

三、编写JavaScript逻辑

最后，我们需要编写JavaScript逻辑，使计算器能够进行加、减、乘、除等运算。

document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.btn');
    const display = document.getElementById('display');
    let currentInput = '';
    let operator = '';
    let firstNumber = '';
    let secondNumber = '';
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const value = this.getAttribute('data-value');
            if (value === 'C') {
                currentInput = '';
                operator = '';
                firstNumber = '';
                secondNumber = '';
                display.textContent = '';
            } else if (value === '=') {
                secondNumber = currentInput;
                if (operator && firstNumber && secondNumber) {
                    const result = calculate(firstNumber, secondNumber, operator);
                    display.textContent = result;
                    currentInput = result;
                    firstNumber = '';
                    secondNumber = '';
                    operator = '';
                }
            } else if (['+', '-', '*', '/'].includes(value)) {
                if (currentInput) {
                    firstNumber = currentInput;
                    currentInput = '';
                    operator = value;
                }
            } else {
                currentInput += value;
                display.textContent = currentInput;
            }
        });
    });
    function calculate(num1, num2, operator) {
        const n1 = parseFloat(num1);
        const n2 = parseFloat(num2);
        switch (operator) {
            case '+':
                return n1 + n2;
            case '-':
                return n1 - n2;
            case '*':
                return n1 * n2;
            case '/':
                return n1 / n2;
            default:
                return 0;
        }
    }
});

四、详细解读与优化

输入处理与显示更新

在这个部分，我们通过监听按钮点击事件来获取用户的输入，并更新显示屏。每个按钮都有一个data-value属性，用来标识其值。
```
buttons.forEach(button => {
    button.addEventListener('click', function () {
        const value = this.getAttribute('data-value');
```
当用户点击按钮时，我们根据按钮的data-value属性来判断其类型（数字、运算符、清除、等于），并更新currentInput和显示屏内容。

运算逻辑

运算逻辑主要包括两个部分：处理运算符和计算结果。 当用户点击运算符按钮时，我们将当前输入的数字保存到firstNumber，并清空currentInput以便输入第二个数字。

if (['+', '-', '*', '/'].includes(value)) {
    if (currentInput) {
        firstNumber = currentInput;
        currentInput = '';
        operator = value;
    }
}

当用户点击等于按钮时，我们将currentInput保存到secondNumber，并调用calculate函数来计算结果。

else if (value === '=') {
    secondNumber = currentInput;
    if (operator && firstNumber && secondNumber) {
        const result = calculate(firstNumber, secondNumber, operator);
        display.textContent = result;
        currentInput = result;
        firstNumber = '';
        secondNumber = '';
        operator = '';
    }
}

计算函数

calculate函数根据运算符执行相应的运算并返回结果。

function calculate(num1, num2, operator) {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    switch (operator) {
        case '+':
            return n1 + n2;
        case '-':
            return n1 - n2;
        case '*':
            return n1 * n2;
        case '/':
            return n1 / n2;
        default:
            return 0;
    }
}

五、优化与扩展

添加更多功能

可以添加更多的功能，如百分比、平方根、幂运算等，以提升计算器的实用性。

function calculate(num1, num2, operator) {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    switch (operator) {
        case '+':
            return n1 + n2;
        case '-':
            return n1 - n2;
        case '*':
            return n1 * n2;
        case '/':
            return n1 / n2;
        case '%':
            return n1 % n2;
        case 'sqrt':
            return Math.sqrt(n1);
        case '^':
            return Math.pow(n1, n2);
        default:
            return 0;
    }
}

优化用户体验

可以通过按键样式和动画效果来提升用户体验。 例如，可以在按钮点击时添加按下效果，或在显示屏上显示正在输入的运算过程。
```
.btn:active {
    background-color: #ddd;
}
```

处理异常情况

在实际使用中，用户可能会输入非法的运算，如除以零、输入非法字符等。 我们需要在calculate函数中处理这些异常情况，以防止程序崩溃。

function calculate(num1, num2, operator) {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    if (isNaN(n1) || isNaN(n2)) {
        return 'Error';
    }
    switch (operator) {
        case '+':
            return n1 + n2;
        case '-':
            return n1 - n2;
        case '*':
            return n1 * n2;
        case '/':
            return n2 !== 0 ? n1 / n2 : 'Error';
        default:
            return 0;
    }
}

通过以上步骤，我们可以实现一个功能完备、美观且用户体验良好的JavaScript计算器。在实际开发中，合理的代码组织和异常处理是确保程序稳定性和可维护性的关键。 希望这篇文章对你有所帮助！