正文

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

/0 浏览量
0404

编写一个简单的计算器程序是一个很好的JavaScript学习项目，它可以帮助你理解变量、条件语句、循环以及事件处理等概念。下面，我将一步步带你通过JavaScript创建一个基本的计算器。

准备工作

在开始之前，确保你有一个可以编写和运行JavaScript代码的环境。你可以使用浏览器内置的开发者工具，也可以安装Node.js。

1. 创建HTML结构

首先，我们需要为计算器创建一个基本的HTML结构。这个结构将包含输入框、按钮以及显示结果的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperation('-')">-</button>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperation('*')">*</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="setOperation('/')">/</button>
    </div>

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

这个HTML结构非常简单，它包含一个文本输入框display用于显示操作和结果，以及多个按钮用于输入数字和操作符。

2. 编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理用户输入和计算结果。

let currentInput = '';
let operation = null;
let firstOperand = null;

function appendNumber(number) {
    currentInput += number;
    updateDisplay();
}

function setOperation(op) {
    if (currentInput === '') return;
    if (firstOperand === null) {
        firstOperand = parseFloat(currentInput);
    } else {
        calculate();
        firstOperand = parseFloat(currentInput);
    }
    operation = op;
    currentInput = '';
}

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

function calculate() {
    let secondOperand = parseFloat(currentInput);
    switch (operation) {
        case '+':
            updateDisplay(firstOperand + secondOperand);
            break;
        case '-':
            updateDisplay(firstOperand - secondOperand);
            break;
        case '*':
            updateDisplay(firstOperand * secondOperand);
            break;
        case '/':
            updateDisplay(firstOperand / secondOperand);
            break;
        default:
            updateDisplay('');
    }
    operation = null;
    firstOperand = null;
}

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

// 页面加载时清空显示
window.onload = clearDisplay;

这段代码定义了几个函数来处理不同的事件：

  • appendNumber(number): 将数字添加到当前输入。
  • setOperation(op): 设置或更改操作符，并准备第二个操作数。
  • clearDisplay(): 清空所有输入和操作。
  • calculate(): 执行计算并将结果显示在显示屏上。
  • updateDisplay(value): 更新显示屏上的值。

3. 运行和测试

将上面的HTML和JavaScript代码保存到.html和.js文件中，然后在浏览器中打开HTML文件。你应该能看到一个简单的计算器，可以输入数字和操作符，并得到结果。

通过这个简单的计算器程序，你可以了解到JavaScript中的基本操作和事件处理。随着你的技能提升，你可以增加更多功能，比如错误处理、更复杂的运算符支持以及更优雅的用户界面设计。

-- 展开阅读全文 --