使用 HTML 和 JavaScript 创建简单计算器的最佳方法

Shuseel Baral5m2023/08/01

以下是使用 HTML 和 JavaScript 制作一个简单计算器的步骤，该计算器可以对整数执行简单的算术运算。

featured image - 使用 HTML 和 JavaScript 创建简单计算器的最佳方法

对于刚刚起步的 Web 开发人员来说，使用 HTML 和 JavaScript 构建一个简单的计算器可能是一项有趣且具有教育意义的工作。

通过结合用于用户界面设计的 HTML 功能和用于计算处理的 JavaScript 功能，您可以在浏览器中构建一个交互式且功能强大的计算器。

在这篇文章中，我们将引导您逐步完成从头开始创建基本计算器的过程，同时探索网络编程的原理。

首先，我们必须先创建项目环境。我们将构建基本的 HTML 框架，作为计算器的基础。此外，为了使计算器在视觉上更具吸引力，我们将使用 CSS 设置其外观。

最后，我们将配置 JavaScript 环境，以便向计算器添加功能。

使用 HTML 和 JavaScript 创建简单计算器的步骤
- 1. 设计用户界面
- 1. 处理用户输入
- 1. 执行计算
简单 HTML 计算器的完整 HTML 代码
简单 HTML 计算器的预览
结论

使用 HTML 和 JavaScript 创建简单计算器的步骤

以下是使用 HTML 和 JavaScript 制作一个简单计算器的步骤，该计算器可以对整数执行简单的算术运算。

文本和按钮输入用于表单元素内的表格，OnClick 事件用于将按钮值放置在屏幕上或评估数字。

1. 设计用户界面

用户界面 (UI) 是计算器的正面。我们将创建一个干净的显示来显示输入和结果。我们还将提供整数和运算符的交互式按钮。我们的目标是产生直观且用户友好的设计，丰富计算器用户的各个方面。

使用以下步骤来设计计算器的用户界面。

步骤 1. 首先，创建 <html> 标签以及 <form> 元素和 <body> 标签，如下所示。

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

步骤 2. 现在，使用 <table> …..</table> 标签在 <form>……</form> 标签内创建一个表格，并使用 <tr 在表格行的表格数据中插入两种类型的输入文本和按钮><td>….</td></tr> 标签。

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

步骤 3. 然后，使用 <input> 标签创建按钮，并在具有 <tr><td>….</td></tr> 标签的表格行中设置这些按钮的“id”和“value”为下面介绍。

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

步骤 4. 最后，添加以下 CSS 代码，为带有 <style>…..</style> 标签的计算器进行设计，如下所示。

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. 处理用户输入

使用以下步骤来设计计算器的用户界面。

＃步骤1。为显示按钮分配一个“onkeypress”事件，该按钮已创建用于显示输入和计算结果，如下所示。

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

步骤 2. 为所有具有数字和算术运算符的按钮分配 OnClick 事件，如下所示。

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. 执行计算

为所有算术运算符分配一个 OnClick 事件，为 Clear(C) 按钮提供带空格 (“”) 的双引号，并使用 eval() 函数计算 OnClick 事件上的数字，如下所示。

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

简单 HTML 计算器的完整 HTML 代码

<html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>

简单 HTML 计算器预览

您可以查看并使用 InfoTechSite 上发布的原始文章中的 HTML 计算器。

单击此处查看 HTML 计算器。

也发布在这里

L O A D I N G
. . . comments & more!

About Author

Shuseel Baral@shuseel

I am a software engineer and web developer from Nepal. My interests range from technology to education.

Read my stories Get free Tech Tutorials Now!