正文

如何用JavaScript编写一个简单的计算器功能

/0 浏览量
1031

编写一个简单的计算器功能是学习JavaScript编程的一个很好的实践项目。以下是一个简单的计算器实现的步骤和代码示例。

1. 确定需求

首先，我们需要确定计算器的基本功能。一个简单的计算器通常可以执行以下操作：

  • 加法
  • 减法
  • 乘法
  • 除法

2. 设计界面

我们可以使用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="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>

3. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现计算器的逻辑。以下是calculator.js文件的内容：

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

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

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

function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    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('除数不能为0');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operation = null;
    previousInput = '';
    updateDisplay();
}

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

4. 运行和测试

将HTML和JavaScript代码保存到相应的文件中，并在浏览器中打开HTML文件。你应该能够看到一个简单的计算器界面，并且可以执行基本的数学运算。

这个简单的计算器只是一个起点。你可以通过添加更多的功能和改进界面来增强它，比如：

  • 支持更多的高级运算，如平方根、指数等。
  • 改进用户界面，使其更加美观和用户友好。
  • 添加错误处理，比如输入非数字字符时的提示。

通过这样的实践，你可以更好地理解JavaScript编程的基础知识，并提高你的编程技能。

-- 展开阅读全文 --