用html+css+js实现一个简易的科学计算器

112100833黄咏清 2023-09-29 00:57:53

这个作业属于哪个课程 2301-计算机学院-软件工程社区-CSDN社区云

这个作业要求在哪里软件工程实践第一次作业-CSDN社区

这个作业的目标：实现一个简易的科学计算器（界面美观能实现计算器基本功能）

项目展示：

0.Gitcode项目地址

1. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	10	10
Development	开发	100	100
• Analysis	• 需求分析 (包括学习新技术）	600	600
• Design Spec	• 生成设计文档	30	30
• Design Review	• 设计复审	30	30
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	60	60
• Design	• 具体设计	20	20
• Coding	• 具体编码	240	250
• Code Review	• 代码复审	30	30
• Test	• 测试（自我测试，修改代码，提交修改）	100	100
Reporting	报告	100	110
• Test Repor	• 测试报告	15	20
• Size Measurement	• 计算工作量	10	15
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	35	30
	合计	1210	1400

2.解题思路分析

html部分：我是用div来布局，并在单元格里用了button标签
css部分：在编写完html之后，我就用css对计算器进行美化，并用上了box-shading、border-radius等属性给按钮标签附上阴影，使得页面更加美观，以下是计算器页面设计结果

js部分（重点）：我使用了forEach方法来遍历每个按钮，并为每个按钮添加了一个点击事件监听器。当用户点击任何一个按钮时，对应按钮的文本内容（innerText）会被获取并存储在变量btnext中。接下来，代码通过一系列的条件判断来对特定的按钮文本进行处理；计算部分，我是引入了一个math库，用math.js计算表达式，并自己列了function fact（）函数来计算阶乘，用func backspc（）函数来实现一位位删除计算结果/输入数字的功能。

3.核心代码

事件监听器部分代码

引用math.js计算表达式（sin cos tan log ln等）此处列出两个函数

4.设计与实现过程

1）结构设计：首先，在HTML中创建了一个包含计算器界面的容器，使用CSS样式对容器进行美化，使其居中显示。计算器界面分为两个部分：显示屏和按钮区域。

显示屏：在HTML中创建一个输入框作为显示屏，用于显示用户输入的表达式和计算结果。设置了ID为"screen"，以便在JavaScript中进行操作。

按钮区域：在HTML中创建了一系列按钮，用于接收用户的输入。每个按钮都有对应的功能或数值，通过JavaScript给每个按钮添加了点击事件监听器。

JavaScript逻辑：在JavaScript中，首先获取了显示屏和所有按钮的引用，并对按钮添加了点击事件监听器。点击按钮时，获取按钮的文本内容，并根据不同的按钮内容进行相应的处理：

数字和运算符按钮：将按钮的文本内容添加到显示屏中。

功能按钮（sin、cos、tan等）：根据按钮的功能进行相应的数学计算，并将结果显示在屏幕上。

等号按钮：获取显示屏上的表达式，使用math.js库进行计算，并将结果显示在屏幕上。

其中，math.js是一个开源的数学计算库，用于解析和计算数学表达式。通过math.evaluate(expression)方法计算表达式的值。

2）特殊情况处理：

除数为0的情况：在计算结果时，通过判断是否包含"/0"来检测除数为0的错误，如果出现该错误则在显示屏上显示"运算错误除数不能为0"。

平方根函数和对数函数的输入检查：在计算平方根和对数时，先检查输入的值是否合法，即大于等于0，如果不合法则在显示屏上显示相应的错误信息。

代码实现了一个简单的计算器功能，用户可以在显示屏上输入表达式，并进行基本的数学运算和函数计算。在设计过程中，通过HTML创建了界面结构，使用CSS进行美化，然后通过JavaScript添加事件监听器并编写逻辑代码实现计算器的功能。

5.程序性能改进

使用事件委托可以减少事件处理器的数量，提高性能。可以将事件处理器绑定在父元素上，通过事件冒泡来处理子元素的事件。

6. 异常处理

在calculate函数中，使用try-catch块来捕获可能出现的错误。如果在math.evaluate(expression)中计算表达式时发生错误，将错误信息打印到控制台。如果expression中包含除以0的情况，在calculate函数中进行判断，并给出相应的错误提示信息。

在sqrt、log和ln函数中，对输入值进行判断，如果小于等于0，则给出相应的错误提示信息。

以下是异常处理的实际效果（分别输入 5/0 sqrt（-4））

7.心得体会（新手第一次“上路”）

这是我第一次真正意义上的做一个“项目”，虽然也许这个计算器的技术含量比较低，但我也在这一星期中狂学、狂看了前端三件套的网课。这一次的项目实验中对html+css+js的运用更加熟练，css中如何设置各种属性使得整体、显示屏、按钮等看起来更加美观，js中如何实现鼠标按键在显示屏上输入（用监听器）、如何引入库（math,js）、如何自己编写函数进行运算等等，让我对做项目更加感兴趣了。其中我也遇到了一些问题，比如鼠标点击按钮没显示、由于js库的精确度较低，出现0.1+0.2不等于0.3的情况，但感觉chatgpt和身边同学的帮助，让我有惊无险地在ddl前完成作业了。

...全文