js 怎么写计算器

JavaScript 计算器的编写

JavaScript 写计算器需要使用HTML、CSS和JavaScript技术相结合、核心在于事件监听和数学运算、界面友好和响应式设计。本文将详细讲解如何使用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>JavaScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div id="display" class="display">0</div>
        <div class="buttons">
            <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" id="clear">C</button>
            <button class="btn operator">+</button>
            <button class="btn" id="equals">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来我们定义CSS样式，使计算器看起来更美观。通过CSS，可以定义按钮的大小、颜色、布局等。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
    font-size: 2rem;
    height: 50px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #222;
    color: #fff;
    text-align: right;
    border-radius: 5px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.btn {
    font-size: 1.5rem;
    padding: 20px;
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #d0d0d0;
}
.operator {
    background-color: #ff9500;
    color: #fff;
}
.operator:hover {
    background-color: #e08e00;
}
#clear {
    background-color: #ff3b30;
    color: #fff;
}
#clear:hover {
    background-color: #e02b20;
}

三、JavaScript功能实现

最后，我们需要编写JavaScript代码来实现计算器的功能。JavaScript部分负责处理按钮点击事件、执行数学运算并更新显示屏。

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('.btn');
    const clearButton = document.getElementById('clear');
    const equalsButton = document.getElementById('equals');
    let currentInput = '';
    let operator = '';
    let previousInput = '';
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            if (button.classList.contains('operator')) {
                handleOperator(button.textContent);
            } else {
                handleNumber(button.textContent);
            }
        });
    });
    clearButton.addEventListener('click', clearDisplay);
    equalsButton.addEventListener('click', calculateResult);
    function handleNumber(number) {
        if (currentInput === '' && number === '.') {
            currentInput = '0.';
        } else {
            currentInput += number;
        }
        updateDisplay(currentInput);
    }
    function handleOperator(op) {
        if (currentInput === '') return;
        if (previousInput !== '') {
            calculateResult();
        }
        operator = op;
        previousInput = currentInput;
        currentInput = '';
    }
    function calculateResult() {
        if (currentInput === '' || previousInput === '') return;
        let result;
        const prev = parseFloat(previousInput);
        const curr = parseFloat(currentInput);
        switch (operator) {
            case '+':
                result = prev + curr;
                break;
            case '-':
                result = prev - curr;
                break;
            case '*':
                result = prev * curr;
                break;
            case '/':
                if (curr !== 0) {
                    result = prev / curr;
                } else {
                    alert("Cannot divide by zero");
                    return;
                }
                break;
            default:
                return;
        }
        currentInput = result.toString();
        operator = '';
        previousInput = '';
        updateDisplay(currentInput);
    }
    function clearDisplay() {
        currentInput = '';
        operator = '';
        previousInput = '';
        updateDisplay('0');
    }
    function updateDisplay(value) {
        display.textContent = value;
    }
});

四、核心功能解析

1、事件监听

在JavaScript部分，首先我们使用 document.addEventListener('DOMContentLoaded', function() { ... }); 确保DOM完全加载后再执行代码。然后我们使用 querySelectorAll 获取所有按钮，并为每个按钮添加点击事件监听器。

2、数学运算

在点击数字按钮时，通过 handleNumber 函数将数字追加到 currentInput。在点击运算符按钮时，通过 handleOperator 函数记录运算符和当前输入，并清空 currentInput 准备接收下一个数字输入。

3、结果计算

在点击等号按钮时，通过 calculateResult 函数根据运算符计算结果，并更新显示屏。这里使用了 switch 语句来处理不同的运算符。

4、清除功能

在点击清除按钮时，通过 clearDisplay 函数重置所有变量，并将显示屏设置为初始状态。

总结：通过本文的详细解析，我们了解了如何使用HTML、CSS和JavaScript编写一个简单的计算器。关键在于事件监听和数学运算的处理，通过合理的代码结构和逻辑实现计算器的核心功能。希望这篇文章能够帮助您更好地掌握JavaScript编程技术。