使用 for 循环在 HTML 中创建简单的计算器

构建一个计算器是学习 JavaScript 的首批挑战之一。本教程介绍了创建 HTML、CSS 和 JavaScript 简易计算器最简单的方法。在本教程中，我们将使用 for 循环创建一个带有计算器的网页。

HTML、CSS 和 JS 简介

1. HTML 是用于构建网页结构的标记语言。
2. CSS 是用于设计网页元素布局和外观的样式语言。
3. JS 是用于定义网页元素行为和功能的脚本语言。

我们可以使用 eval() 函数。虽然已经有关于它的教程，但由于安全风险，eval() 不太推荐使用。eval() 函数接受字符串形式的表达式作为输入，对其进行求值并返回结果。

例如

eval("4*3+2") 返回 14

但是，不建议使用 eval()，因为它可能导致恶意攻击。如上所述，eval() 可以接受任何形式的表达式，甚至是长字符串。如果有人——黑客或某个恶作剧用户——输入一个无限值，它会一直执行，减慢整个服务器的评估速度，而不是识别攻击。

因此，我们将不使用该函数，而仅使用循环来构建一个简易计算器。

思路

思路是创建一个表格。表格的第一行应该是显示屏。接下来的几行必须包含数字按钮、清除、退格、等于按钮和运算符按钮。

1. 点击数字或运算符时，按钮的值必须显示在显示屏上。
2. 点击 C 时，显示屏必须清空。
3. 点击 B 时，显示屏上的最后一个字符必须被删除。
4. 点击“=”时，显示屏上的所有内容都必须计算，然后显示屏上必须显示输入的表达式的结果。

因此，我们需要在 JavaScript 中为四种类型的按钮编写四个函数。

您可以使用 CSS 以任何您想要的方式样式化计算器。为了简单起见，我们不使用太多样式功能。我们将以与我们使用 eval() 创建计算器的教程相同的风格创建计算器。

我们将创建一个这样的计算器

• 我们使用io来开发代码。您可以使用文本编辑器或任何您想要的软件。

HTML部分

1. 创建一个带有 .html 扩展名的新文件： calci.html
2. 在 head 部分，我们将标题设置为 calci。body 中的第一个标签是 center，用于将标题和计算器放在网页中央。
3. 然后，我们将网页的主标题设置为“简单计算器”。
4. 我们构建了一个表格，如下所示：
   • 每一行都包含要按下的按钮，并且每次点击按钮时，都会从 js 调用一个函数进行计算。
   • 第一行的按钮：三个空列，C 和 B。C 用于清除显示屏，B 用于退格。
   • 第二行的按钮：7、8、9、空列、+ 和 -。
   • 第三行的按钮：6、5、4、空列、* 和 /。
   • 第四行的按钮：1、2、3、空列、小数点和 =。
5. 我们将使用内联 CSS 和 JS，在 head 部分使用 <style></style> 和 <script></script> 标签。

HTML部分

代码

输出

• 按下这些按钮时，什么都不会发生。
• 在进入样式部分之前，我们将处理功能部分。

现在，是时候使用 CSS 设计网页了。

CSS 部分

以下是所有使用的 CSS 属性及其解释的表格：

表格样式

Button (按钮)

JavaScript 部分

现在是时候使用 JavaScript 为计算器提供实际功能了。

1. 观察 HTML 代码，我们调用了四个函数 fun()、C()、B() 和 res()。
2. fun(a)
   • 点击所有数字和运算符按钮时，我们调用 fun() 并将数字或运算符的值作为参数传递。
   • 在函数中，我们需要将该值打印到显示输入框中，因此，我们将参数连接到输入框中已有的值。
3. C(): 我们只需将显示输入框的值重新赋给一个空字符串即可清除显示。
4. B(): 我们将获取显示屏上的整个字符串，对其进行切片，删除最后一个字符，然后将其重新赋给显示屏。
5. res(): 此函数在点击 = 时激活。

整个功能在于 res()。首先，观察代码。

输出

机制

1. 显示屏上输入的表达式存储在变量 a 中。
2. 现在，我们创建了两个数组 index[] 和 numbers[]。
3. 使用 for 循环，我们遍历表达式，将运算符的索引存储在数组 index 中，并将其打印在 HTML 中定义的段落中。
4. 因此，数组 index[] 包含 a 中运算符的索引。
5. 现在，我们需要使用运算符将表达式（字符串形式）分解成数字。
6. 我们创建另一个数组 res[]。
7. 让我们以一个例子来更好地理解。
   a = 8 + 9 - 8 * 23
8. 现在，数组 index[] = [1, 3, 5]
9. 假设表达式以 - 开头，为了处理这种情况，我们检查 a[0] 是否为 -，如果是负数，我们在开头将 0 添加到表达式中。
   例如：-8-9 -> 0-8-9
10. 在 for 循环中，我们遍历表达式，使用 index[] 用 a 中的值或数字填充 res[]。
11. 获取字符串后，我们使用 parseFloat() 将值转换为浮点数。我们在下一段中打印它。
12. 现在，根据上面的例子
    a = 8 + 9 - 8 * 23
    index = [1, 3, 5]
    res = [8, 9, 8, 23]
13. 可以看到 res 的大小 = index 的大小 - 1。
14. 我们需要遵循数学规则 BODMAS 来求解任何表达式。
15. 如果有像 3-2*5 这样的表达式。
    答案应该是 3-10 = -7，而不是 1*5 = 5。乘法优先于减法。
16. BODMAS：括号、的、除法、乘法、加法和减法。
17. 此计算器中没有括号，因此我们只需遵循四个运算符（算术 - +、-、* 和 /）。
18. 这里，我们使用了四个 for 循环。
19. 想法是遍历 index[] 并对 res[j] 和 res[j+1] 上的 index[i] 处的运算符执行操作。为了遍历 index[]，我们使用 i 和 j 来遍历 res[]。
20. splice() 用于在解决操作后操作 res[]。它将所有值拉到每个空索引的空索引中。
21. 第一个 for 循环执行所有除法，第二个执行乘法，第三个执行加法，最后一个执行减法。
22. 在上面的例子中
    a = 8 + 9 - 8 * 23
    在第二个循环中。
    index = [1, 3, 5]
    res = [8, 9, 8, 23]
    a[index[2]] = *
    res[1] = res[2]*res[3] = 8*23 = 184
    res = [8, 9, 184]
    
    在第三个循环中。
    index = [1, 3, 5]
    res = [8, 9, 184]
    a[index[0]] = +
    res[0] = res[0] + res[1] = 8 + 9 = 17
    res = [17, 184]
    
    在第四个循环中。
    index = [1, 3, 5]
    res = [17, 184]
    a[res[1]] = 17 - 184 = -167
    res = [-167]
23. 最后，我们将显示屏上的表达式替换为结果。

局限性

1. 此代码无法处理括号、连续运算符，并且在使用的循环数量方面效率不高。这只是我们想到制作计算器的一个想法。
2. 我们可以扩展代码来处理这些。请注意，在我们举的例子中，表达式中没有 /，但第一个循环只是被遍历而没有任何用途。因此，这不是一个非常有效的方法。
3. 我们将在下一篇题为“Dijkstra 的“Shunting Yard 算法””的教程中介绍最佳方法。