计算器JS怎么写

计算器JS怎么写

编写一个计算器应用程序是一个非常好的练习，尤其是对于那些想学习和理解JavaScript的人。基本的计算器功能包括加法、减法、乘法和除法。下面我们将详细描述如何从零开始编写一个计算器应用程序，并确保代码简洁且易于理解。

一、构建基本的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>计算器</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>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、添加样式

为了让我们的计算器看起来更好，我们可以添加一些基本的CSS样式。创建一个名为styles.css的文件，并添加以下样式：

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

三、实现JavaScript逻辑

现在，我们已经有了HTML和CSS结构，可以开始编写JavaScript代码来实现计算器的功能。创建一个名为script.js的文件，并添加以下代码：

document.addEventListener("DOMContentLoaded", function() {
    const display = document.getElementById('display');
    const buttons = Array.from(document.getElementsByClassName('btn'));
    let currentOperand = '';
    let previousOperand = '';
    let operation = undefined;
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.getAttribute('data-value');
            if (value >= '0' && value <= '9' || value === '.') {
                appendNumber(value);
                updateDisplay();
            } else if (value === '+' || value === '-' || value === '*' || value === '/') {
                chooseOperation(value);
                updateDisplay();
            } else if (value === '=') {
                compute();
                updateDisplay();
            }
        });
    });
    function appendNumber(number) {
        if (number === '.' && currentOperand.includes('.')) return;
        currentOperand = currentOperand.toString() + number.toString();
    }
    function chooseOperation(op) {
        if (currentOperand === '') return;
        if (previousOperand !== '') {
            compute();
        }
        operation = op;
        previousOperand = currentOperand;
        currentOperand = '';
    }
    function compute() {
        let computation;
        const prev = parseFloat(previousOperand);
        const current = parseFloat(currentOperand);
        if (isNaN(prev) || isNaN(current)) return;
        switch (operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '*':
                computation = prev * current;
                break;
            case '/':
                computation = prev / current;
                break;
            default:
                return;
        }
        currentOperand = computation;
        operation = undefined;
        previousOperand = '';
    }
    function updateDisplay() {
        display.innerText = currentOperand;
    }
});

四、优化和扩展功能

在实现了基本功能后，我们可以进一步优化和扩展计算器的功能。例如，添加清除按钮、实现键盘输入等。以下是一些优化建议：

1、添加清除按钮

在HTML中添加一个清除按钮：

<button class="btn" data-value="C">C</button>

在JavaScript中实现清除功能：

button.addEventListener('click', () => {
    const value = button.getAttribute('data-value');
    if (value === 'C') {
        clear();
        updateDisplay();
    }
});
function clear() {
    currentOperand = '';
    previousOperand = '';
    operation = undefined;
}

2、实现键盘输入

我们可以监听键盘事件来实现键盘输入功能：

document.addEventListener('keydown', (event) => {
    const key = event.key;
    if (key >= '0' && key <= '9' || key === '.') {
        appendNumber(key);
        updateDisplay();
    } else if (key === '+' || key === '-' || key === '*' || key === '/') {
        chooseOperation(key);
        updateDisplay();
    } else if (key === 'Enter' || key === '=') {
        compute();
        updateDisplay();
    } else if (key === 'Escape') {
        clear();
        updateDisplay();
    }
});

五、总结

通过以上步骤，我们成功地创建了一个功能齐全的计算器应用程序。在开发过程中，我们学习了如何使用HTML、CSS和JavaScript来构建用户界面和实现功能逻辑。继续优化和扩展功能，你可以根据自己的需求添加更多功能，例如百分比计算、负数输入等。希望这篇文章对你有所帮助，祝你在编程学习中取得更大的进步！