正文

轻松学会JS加减计算器：步骤详解，小白也能轻松上手！

/0 浏览量
1018

想要学习JavaScript并制作一个简单的加减计算器？别担心，这里将一步步带你完成这个有趣的项目。无论是编程新手还是对JavaScript有一定了解的用户，这篇文章都能帮助你轻松上手。

第一步：准备环境

首先，确保你的电脑上安装了支持JavaScript的开发环境。这里推荐使用Visual Studio Code（VS Code）作为你的代码编辑器，因为它是免费的、功能强大的，并且支持JavaScript。

第二步：创建HTML结构

在VS Code中创建一个新的HTML文件（例如calculator.html），并添加以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 加减计算器</title>
</head>
<body>
    <h1>JavaScript 加减计算器</h1>
    <input type="text" id="display" disabled>
    <button onclick="addNumber('1')">1</button>
    <button onclick="addNumber('2')">2</button>
    <button onclick="addNumber('3')">3</button>
    <button onclick="addOperation('+')">+</button>
    <button onclick="clearDisplay()">C</button>
    <!-- ... 其他数字和操作按钮 ... -->
    <button onclick="calculate()">=</button>
</body>
</html>

这里我们创建了一个文本输入框用于显示计算结果，以及一些按钮用于输入数字和操作。

第三步：编写CSS样式

为了让计算器看起来更美观，你可以添加一些CSS样式。在calculator.html的<head>标签中添加以下样式：

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#display {
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
}

button {
    width: 50px;
    height: 50px;
    margin: 5px;
}

第四步：编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理用户的输入和计算。在<body>标签的底部添加以下JavaScript代码：

let currentInput = '';
let operation = null;
let firstNumber = null;

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

function addOperation(op) {
    if (operation !== null) {
        calculate();
    }
    operation = op;
    firstNumber = parseFloat(currentInput);
    currentInput = '';
}

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

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

function calculate() {
    let secondNumber = parseFloat(currentInput);
    let result;
    if (operation === '+') {
        result = firstNumber + secondNumber;
    } else if (operation === '-') {
        result = firstNumber - secondNumber;
    }
    currentInput = result.toString();
    operation = null;
    firstNumber = null;
    updateDisplay();
}

这段代码实现了加减运算的基本逻辑。用户点击数字按钮时，会调用addNumber函数将数字添加到当前输入。点击操作按钮时，会调用addOperation函数设置操作类型并存储第一个数字。点击等号按钮时，会调用calculate函数执行计算并更新显示。

第五步：测试和调试

保存你的HTML文件，并在浏览器中打开它。尝试使用计算器进行加减运算，确保一切工作正常。如果遇到问题，查看控制台中的错误信息，并相应地调整代码。

总结

通过以上步骤，你已经成功创建了一个简单的JavaScript加减计算器。这是一个很好的起点，你可以在此基础上添加更多的功能，例如乘除运算、错误处理和更复杂的界面设计。继续练习，你会越来越熟练地使用JavaScript。祝你学习愉快！

-- 展开阅读全文 --