使用 JavaScript 编写计算器337

简介

JavaScript 是一种强大且灵活的编程语言，可用于创建各种交互式 Web 应用程序和工具。其中一个常见且有用的应用程序是计算器，它允许用户执行基本的算术运算。本文将指导您使用 JavaScript 编写自己的计算器，逐步了解各个概念和代码实现。

创建 HTML 结构

要创建计算器，我们需要从创建一个基本的 HTML 结构开始。它将包含输入字段、按钮和用于显示结果的元素。以下是基本 HTML 代码：```html

7
8
9
+

```

在上面的代码中，我们定义了一个输入字段 `#display` 来显示计算，一个 `#buttons` div 来包含按钮，以及一个 `#result` div 来显示最终结果。我们将使用 JavaScript 来绑定按钮事件处理程序并执行计算。

JavaScript 代码

接下来，让我们编写 JavaScript 代码来处理按钮点击和执行计算。首先，我们需要定义一些全局变量来跟踪当前运算数、运算符和结果：```javascript
let firstNum = "";
let operator = "";
let result = "";
```

然后，我们将编写函数来处理数字按钮的点击。当用户点击数字按钮时，它将更新 `firstNum` 变量并将其显示在 `display` 元素中：```javascript
function num(digit) {
firstNum += digit;
("display").value = firstNum;
}
```

接下来，我们将编写一个函数来处理运算符按钮的点击。当用户点击运算符按钮时，它将存储运算符并等待第二个运算数：```javascript
function operator(op) {
operator = op;
("display").value += " " + op + " ";
}
```

最后，我们将编写一个函数来计算结果并将其显示在 `#result` div 中。当用户点击 `=` 按钮时，它将根据 `firstNum`、`operator` 和任何其他用户输入的运算数执行计算：```javascript
function calculate() {
let secondNum = ("display").(" ").pop();
switch (operator) {
case "+":
result = parseFloat(firstNum) + parseFloat(secondNum);
break;
case "-":
result = parseFloat(firstNum) - parseFloat(secondNum);
break;

}
("result").innerHTML = result;
}
```

绑定事件处理程序

最后，我们需要为每个按钮绑定 JavaScript 事件处理程序，以便在点击时触发相应的函数：```javascript
(".buttons button").forEach((btn) => {
("click", () => {
if (("num-btn")) {
num();
} else if (("operator-btn")) {
operator();
} else if (("equals-btn")) {
calculate();
}
});
});
```

完成的计算器

通过完成上述步骤，您将拥有一个基本的 JavaScript 计算器。您可以根据需要扩展此计算器，以添加更多运算符、处理小数点或创建更复杂的功能。通过了解 JavaScript 的基本概念和 DOM 操作，您可以创建各种交互式和实用的 Web 应用程序。

2025-02-07

上一篇：JavaScript 的单线程模型剖析

下一篇：如何巧妙地在 JavaScript 字符串中插入文本