对于刚刚起步的 Web 开发人员来说，使用 HTML 和 JavaScript 构建一个简单的计算器可能是一项有趣且具有教育意义的工作。 通过结合用于用户界面设计的 HTML 功能和用于计算处理的 JavaScript 功能，您可以在浏览器中构建一个交互式且功能强大的计算器。 在这篇文章中，我们将引导您逐步完成从头开始创建基本计算器的过程，同时探索网络编程的原理。 首先，我们必须先创建项目环境。我们将构建基本的 HTML 框架，作为计算器的基础。此外，为了使计算器在视觉上更具吸引力，我们将使用 CSS 设置其外观。 最后，我们将配置 JavaScript 环境，以便向计算器添加功能。 目录 使用 HTML 和 JavaScript 创建简单计算器的步骤 设计用户界面 处理用户输入 执行计算 简单 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 计算器。 也发布 在这里

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

扬帆起航：利用数据湖开发生产级 RAG 应用程序

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

创建以用户为中心的加密产品：客户反馈的重要性

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

扬帆起航：利用数据湖开发生产级 RAG 应用程序

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

创建以用户为中心的加密产品：客户反馈的重要性

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps