正文

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

/0 浏览量
0402

编写一个简单的计算器程序是学习JavaScript基础的好方法。在这个例子中，我们将创建一个具有加、减、乘、除功能的基本计算器。以下是实现这个计算器的步骤：

1. 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>
</head>
<body>

<div id="calculator">
    <input type="text" id="display" disabled>
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <button onclick="appendValue('3')">3</button>
    <button onclick="setOperation('+')">+</button>
    
    <button onclick="appendValue('4')">4</button>
    <button onclick="appendValue('5')">5</button>
    <button onclick="appendValue('6')">6</button>
    <button onclick="setOperation('-')">-</button>
    
    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('8')">8</button>
    <button onclick="appendValue('9')">9</button>
    <button onclick="setOperation('*')">*</button>
    
    <button onclick="appendValue('0')">0</button>
    <button onclick="setOperation('/')">/</button>
    <button onclick="calculate()">=</button>
    <button onclick="clearDisplay()">C</button>
</div>

<script src="calculator.js"></script>
</body>
</html>

2. CSS样式

你可以添加一些简单的CSS样式来美化你的计算器。

#calculator {
    width: 300px;
    margin: auto;
    margin-top: 50px;
}

button {
    width: 25%;
    padding: 10px;
    margin: 5px;
    font-size: 18px;
}

3. JavaScript逻辑

现在，我们需要编写JavaScript代码来处理按钮点击事件和计算逻辑。

let currentInput = '';
let previousInput = '';
let operation = null;

function appendValue(value) {
    currentInput += value;
    updateDisplay();
}

function setOperation(op) {
    if (currentInput === '') return;
    if (previousInput !== '') calculate();
    operation = op;
    previousInput = currentInput;
    currentInput = '';
    updateDisplay();
}

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('Cannot divide by zero');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operation = null;
    previousInput = '';
    updateDisplay();
}

function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    updateDisplay();
}

function updateDisplay() {
    document.getElementById('display').value = currentInput;
}

4. 使用方法

将上述HTML、CSS和JavaScript代码保存到一个文件中，并在浏览器中打开它。你应该能够看到一个简单的计算器界面，你可以通过点击按钮来输入数字和选择运算符，点击等号按钮来计算结果。

这个简单的计算器程序是一个很好的起点，你可以在此基础上添加更多的功能，比如支持更复杂的运算、错误处理、更友好的用户界面等。

-- 展开阅读全文 --