使用 JavaScript 中的 eval() 和 CSS 在 HTML 中创建简单的计算器

学习HTML和JavaScript时，构建一个计算器是第一个挑战之一。本教程介绍了创建简单计算器最简单的方法，该方法使用了HTML、CSS和JavaScript。我们将创建一个带有计算器的简单网页。

HTML、CSS 和 JS 简介

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

eval() 方法

eval() 函数接受一个字符串形式的表达式作为输入，对其进行求值并返回结果。

例如

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

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

• 使用eval() 可能存在安全隐患。如果程序接受用户输入并将其传递给eval()，则黑客可以注入恶意代码作为输入，该代码将在函数的作用域内任意执行，从而泄露敏感凭据，如登录详细信息等。
• 我们需要对eval() 函数的输入进行净化，或者最好使用其他函数代替eval()。

对于初学者级别的计算器设计，我们暂时使用它。

思路

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

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

因此，我们需要在JavaScript中为四种类型的按钮编写四个函数。您可以使用CSS以任何您想要的方式为计算器设置样式。为了简单起见，我们不使用许多样式功能。

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

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

HTML部分

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

这是 HTML 代码

输出

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

JavaScript部分

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

内联JS代码

输出

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

CSS部分

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

表格样式

Button (按钮)