js中计算器怎么做的

在JavaScript中实现一个计算器并不复杂，但要做好一个功能完善的计算器应用需要考虑到多个方面。实现计算器的基本步骤包括：创建HTML结构、编写CSS样式、编写JavaScript逻辑。以下是详细的步骤和代码示例。

一、创建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>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 clear" 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;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    width: 200px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.display {
    background-color: #222;
    color: #fff;
    text-align: right;
    padding: 20px;
    font-size: 2em;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    padding: 20px;
    font-size: 1.2em;
    cursor: pointer;
    text-align: center;
}
.btn:hover {
    background-color: #d0d0d0;
}
.btn.clear {
    grid-column: span 4;
    background-color: #ff4d4d;
    color: #fff;
}
.btn.clear:hover {
    background-color: #ff1a1a;
}

三、编写JavaScript逻辑

最后，我们需要编写JavaScript代码来实现计算器的逻辑。JavaScript部分负责处理按钮点击事件、显示更新和计算结果。

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('.btn');
    let currentInput = '';
    let firstOperand = null;
    let operator = null;
    let shouldResetDisplay = false;
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.getAttribute('data-value');
            if (value === 'C') {
                clearDisplay();
            } else if (value === '=') {
                calculateResult();
            } else if (['+', '-', '*', '/'].includes(value)) {
                setOperator(value);
            } else {
                appendNumber(value);
            }
        });
    });
    function clearDisplay() {
        currentInput = '';
        firstOperand = null;
        operator = null;
        shouldResetDisplay = false;
        display.textContent = '0';
    }
    function calculateResult() {
        if (operator && currentInput !== '') {
            const secondOperand = parseFloat(currentInput);
            let result;
            switch (operator) {
                case '+':
                    result = firstOperand + secondOperand;
                    break;
                case '-':
                    result = firstOperand - secondOperand;
                    break;
                case '*':
                    result = firstOperand * secondOperand;
                    break;
                case '/':
                    result = firstOperand / secondOperand;
                    break;
                default:
                    return;
            }
            display.textContent = result;
            firstOperand = result;
            currentInput = '';
            operator = null;
            shouldResetDisplay = true;
        }
    }
    function setOperator(op) {
        if (currentInput !== '') {
            if (firstOperand === null) {
                firstOperand = parseFloat(currentInput);
            } else if (operator) {
                calculateResult();
            }
            operator = op;
            shouldResetDisplay = true;
        }
    }
    function appendNumber(number) {
        if (shouldResetDisplay) {
            currentInput = number;
            shouldResetDisplay = false;
        } else {
            currentInput += number;
        }
        display.textContent = currentInput;
    }
});

四、功能扩展与优化

1、增加键盘支持

为了让用户可以使用键盘操作计算器，我们可以为每个按键绑定相应的键盘事件。

document.addEventListener('keydown', function(event) {
    const key = event.key;
    if (key === 'Escape') {
        clearDisplay();
    } else if (key === 'Enter' || key === '=') {
        calculateResult();
    } else if (['+', '-', '*', '/'].includes(key)) {
        setOperator(key);
    } else if (/d/.test(key) || key === '.') {
        appendNumber(key);
    }
});

2、处理浮点数精度问题

在JavaScript中，浮点数运算可能会出现精度问题。我们可以使用toFixed方法来修正结果的精度。

function calculateResult() {
    if (operator && currentInput !== '') {
        const secondOperand = parseFloat(currentInput);
        let result;
        switch (operator) {
            case '+':
                result = firstOperand + secondOperand;
                break;
            case '-':
                result = firstOperand - secondOperand;
                break;
            case '*':
                result = firstOperand * secondOperand;
                break;
            case '/':
                result = firstOperand / secondOperand;
                break;
            default:
                return;
        }
        result = parseFloat(result.toFixed(10)); // 修正浮点数精度问题
        display.textContent = result;
        firstOperand = result;
        currentInput = '';
        operator = null;
        shouldResetDisplay = true;
    }
}

3、增强用户体验

可以考虑增加更多的功能，比如处理负数、添加平方根、百分比运算等。并且可以使用动画效果增加用户体验。

五、总结

通过上述步骤，我们可以实现一个功能基本齐全的JavaScript计算器。核心步骤包括：创建HTML结构、编写CSS样式、编写JavaScript逻辑。为了增强用户体验，可以进一步扩展功能并处理浮点数精度问题。希望这篇文章对你有所帮助！