如何在 JavaScript 中创建计算器84

JavaScript 是一个功能强大的语言，可用于创建各种应用程序和交互式元素。其中一个有用的应用程序是计算器，它允许用户输入表达式并计算结果。

本文将指导您如何使用 JavaScript 创建一个基本的计算器。我们将涵盖以下主题：* 创建基本架构
* 添加数字和运算符按钮
* 解析和计算输入
* 显示结果

创建基本架构

首先，我们需要创建一个 HTML 文件来容纳我们的计算器。该文件应包含以下内容：```html

JavaScript 计算器

```

此 HTML 文件设置了计算器的基本结构。它包含一个标题、一个用于显示结果的 div、一个用于容纳按钮的 div 以及一个引用外部 JavaScript 文件的脚本标记。

添加数字和运算符按钮

接下来，我们需要向计算器添加数字和运算符按钮。我们可以通过在按钮 div 中使用 JavaScript 动态创建这些按钮：```javascript
// 获取 buttons div
const buttonsDiv = ("buttons");
// 创建数字按钮
for (let i = 0; i {
+= i;
});
(button);
}
// 创建运算符按钮
const operators = ["+", "-", "*", "/"];
for (let operator of operators) {
const button = ("button");
= operator;
("click", () => {
+= operator;
});
(button);
}
```

此代码使用 for 循环动态创建数字和运算符按钮。每个按钮都有一个点击事件侦听器，当单击时会将按钮的文本内容附加到显示 div。

解析和计算输入

现在我们有了数字和运算符按钮，我们需要解析用户的输入并计算结果。我们可以使用 eval() 函数来解析输入，但这里不推荐使用，因为有安全隐患。

一种更安全的方法是使用正则表达式来提取数字和运算符，然后使用数学运算符进行计算：```javascript
// 解析输入
const displayValue = ;
const numbers = (/\d+/g);
const operators = (/[+-/*]/g);
// 检查输入的有效性
if ( !== 2 || !== 1) {
alert("Invalid input");
return;
}
// 计算结果
let result;
switch (operators[0]) {
case "+":
result = parseInt(numbers[0]) + parseInt(numbers[1]);
break;
case "-":
result = parseInt(numbers[0]) - parseInt(numbers[1]);
break;
case "*":
result = parseInt(numbers[0]) * parseInt(numbers[1]);
break;
case "/":
result = parseInt(numbers[0]) / parseInt(numbers[1]);
break;
}
```

此代码使用 match() 方法提取数字和运算符，然后使用 switch 语句基于运算符执行计算。结果存储在 result 变量中。

显示结果

最后，我们需要将结果显示在显示 div 中：```javascript
// 显示结果
= result;
```

此代码将 result 变量的内容附加到 display div，从而显示计算结果。

完整代码

以下是在 JavaScript 中创建计算器的完整代码：```html

JavaScript 计算器

// 获取 buttons div
const buttonsDiv = ("buttons");
// 创建数字按钮
for (let i = 0; i {
+= i;
});
(button);
}
// 创建运算符按钮
const operators = ["+", "-", "*", "/"];
for (let operator of operators) {
const button = ("button");
= operator;
("click", () => {
+= operator;
});
(button);
}
// 解析输入
const display = ("display");
const displayValue = ;
const numbers = (/\d+/g);
const operators = (/[+-/*]/g);
// 检查输入的有效性
if ( !== 2 || !== 1) {
alert("Invalid input");
return;
}
// 计算结果
let result;
switch (operators[0]) {
case "+":
result = parseInt(numbers[0]) + parseInt(numbers[1]);
break;
case "-":
result = parseInt(numbers[0]) - parseInt(numbers[1]);
break;
case "*":
result = parseInt(numbers[0]) * parseInt(numbers[1]);
break;
case "/":
result = parseInt(numbers[0]) / parseInt(numbers[1]);
break;
}
// 显示结果
= result;

```