软工作业1——实现计算器

最新推荐文章于 2024-09-12 18:22:06 发布
最新推荐文章于 2024-09-12 18:22:06 发布
阅读量109 收藏
点赞数
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67473148/article/details/133356012
版权
本文讲述了作者完成一个具有可视化界面的计算器作业的过程，涉及Gitcode项目管理、HTML/CSS/JS实现、PSP表格的时间管理、解题思路、接口设计、性能优化、单元测试和异常处理，以及开发初学者的心得体会。
摘要由CSDN通过智能技术生成
这个作业属于哪个课程<班级的链接>
这个作业要求在哪里https://bbs.csdn.net/forums/ssynkqtd-05?spm=1001.2014.3001.6685
这个作业的目标完成一个具有可视化界面的计算器
其他参考文献https://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html

文章目录

前言

本次作业的任务目标是完成一个具有可视化界面的计算器，没有语言限制。考虑到自己没有过开发经验且刚开始了解前端语言，在一些相关网站上学习后，决定尝试使用html,css,js来实现此次作业的任务。

演示视频

一、Gitcode项目

Gitcode项目地址

二、PSP表格

PSP2.1Personal Software Process Stages预估耗时(分钟)实际耗时(分钟）
Planning计划2025
· Estimate· 估计这个任务需要多少时间2015
Development开发600620
· Analysis· 需求分析 (包括学习新技术)3035
· Design Spec· 生成设计文档6055
· Design Review· 设计复审1015
· Coding Standard· 代码规范 (为目前的开发制定合适的规范)4050
· Design· 具体设计4045
· Coding· 具体编码300320
· Code Review· 代码复审5040
· Test· 测试（自我测试，修改代码，提交修改50255
Reporting报告150100
· Test Report· 测试报告3030
· Size Measurement· 计算工作量1515
· Postmortem & Process Improvement Plan· 事后总结, 并提出过程改进计划6075
合计14751710

三、解题思路描述

首先，使用HTML创建一个表单和一个只读的文本框，用于显示计算结果。
然后，使用HTML的input标签创建数字按钮、运算符按钮和功能按钮。每个按钮添加一个onclick事件处理程序。当用户单击按钮时，这个事件处理程序将被调用，并执行相应的操作（例如，将数字或运算符添加到文本框中）。
最后，使用JavaScript的eval函数来计算表达式的值，并将结果显示在文本框中。当用户按下等号键时，将调用eval函数进行计算，并将结果显示在文本框中。另外，定义一个JavaScript函数，名为insertDecimalPoint()，用于实现小数点的功能。
通过这个简单的计算器，用户可以执行基本的加、减、乘、除，归零以及三角函数，平方，幂操作。

四、接口设计和实现过程

1.在HTML设计计算器的界面结构：
设计输入框、数字按钮、运算符按钮、等号按钮、清除按钮和退格按钮等元素。每个按钮都有一个onclick事件处理程序，用于响应用户的点击操作。
（1） 当用户点击数字按钮时，onclick事件处理程序将相应的数字添加到输入框中；
（2）当用户点击运算符按钮时，onclick事件处理程序根据当前的运算符进行相应的数学运算，并将结果添加到输入框中；
（3）当用户点击等号按钮时，onclick事件处理程序计算当前表达式的结果并显示在输入框中。

2.使用JavaScript实现计算器的逻辑功能：
设计获取用户输入的表达式、根据运算符执行相应的数学运算、计算表达式的结果并显示在文本框中等功能。定义一个JavaScript函数eval()，用于计算表达式的值。当用户点击等于号按钮时，eval()函数会被调用，计算当前表达式的值并将结果显示在输入框中。

3.样式设计和美化：
（1）定义一个名为".calculator"的类，设计计算器的外框，包括边框（border），边框圆角（border-radius），内边距（padding），背景颜色（background-color），阴影效果等。
（2）设置CSS样式表，用于定义HTML中的的样式，设置display，justify-content，align-items，background-color等属性，修改页面背景色，使页面的内容在水平和垂直方向上都居中显示。
（3）设置CSS样式表，应用于HTML中的标签，并设置type属性为"text"，设计文本输入框的样式，包括宽度，内边距，边框圆角和边框颜色等。
（4）设置CSS样式表，应用于HTML中的标签，并设置type属性为"button"，设计所有按钮的样式，包括宽度、边框圆角、背景颜色、阴影效果和边框颜色等。再通过style属性修改个别按钮的颜色。
4.html转exe

五、关键代码展示

1.在HTML设计计算器的界面结构,设计输入框、数字按钮、运算符按钮、等号按钮、清除按钮和退格按钮等元素。每个按钮都有一个onclick事件处理程序，用于响应用户的点击操作。

<div class="calculator">
        <form name="calculator">
            <input type="text" name="display" readonly>
            <br><br>
            <input type="button" value="1" onclick="calculator.display.value += '1'">
            <input type="button" value="2" onclick="calculator.display.value += '2'">
            <input type="button" value="3" onclick="calculator.display.value += '3'">
            <input type="button" value="+" onclick="calculator.display.value += '+'">
            <br><br>
            <input type="button" value="4" onclick="calculator.display.value += '4'">
            <input type="button" value="5" onclick="calculator.display.value += '5'">
            <input type="button" value="6" onclick="calculator.display.value += '6'">
            <input type="button" value="-" onclick="calculator.display.value += '-'">
            <br><br>
            <input type="button" value="7" onclick="calculator.display.value += '7'">
            <input type="button" value="8" onclick="calculator.display.value += '8'">
            <input type="button" value="9" onclick="calculator.display.value += '9'">
            <input type="button" value="*" onclick="calculator.display.value += '*'">
            <br><br>
            <input type="button" value="." onclick="insertDecimalPoint()">
            <input type="button" value="0" onclick="calculator.display.value += '0'">
            
            <input type="button" value="/" onclick="calculator.display.value += '/'">
            <br><br>
            <input type="button" value="^" onclick="calculator.display.value = Math.pow(calculator.display.value, 2)">
            <input type="button" value="^^" onclick="calculator.display.value = Math.pow(calculator.display.value, 3)">

            <input type="button" value="CE" onclick="calculator.display.value = calculator.display.value.slice(0, -1)"
                style="background-color: rgb(246, 180, 94);">
            <input type="button" value="C" onclick="calculator.display.value = ''"
                style="background-color: rgb(244, 131, 108);">

            <br><br>
            <input type="button" value="tan(" onclick="calculator.display.value = Math.tan(calculator.display.value)">
            <input type="button" value="sin(" onclick="calculator.display.value = Math.sin(calculator.display.value)">
            <input type="button" value="cos(" onclick="calculator.display.value = Math.cos(calculator.display.value)">
        </form>
    </div>

2.定义一个JavaScript函数eval()，用于计算表达式的值。当用户点击等于号按钮时，eval()函数会被调用，计算当前表达式的值并将结果显示在输入框中。

<input type="button" value="=" onclick="calculator.display.value =val(calculator.display.value)"
                style="background-color: rgb(145, 187, 240);">

3.设置CSS样式表，设计页面样式，计算器外框样式，输入框样式，按钮样式等。

<style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fbf8f7;

        }

        .calculator {
            border: 2px solid #c6c5c500;
            border-radius: 5px;
            padding: 40px;
            background-color: #eede90;
            box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.1);
            border-color: rgba(255, 228, 196, 0);
        }

        input[type=text] {
            width: 85%;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 18px;
            border-radius: 8px;
            border-color: rgba(255, 228, 196, 0);
        }

        input[type=button] {
            width: 20%;
            margin: 1%;
            padding: 5px;
            font-size: 18px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 2px 3px 5px rgb(95, 94, 94);
            border-color: rgba(255, 228, 196, 0);
        }
    </style>

六、性能改进

最开始涉及时主要考虑运算功能的实现，之后发现没有考虑到小数点功能。
定义一个JavaScript函数，名为insertDecimalPoint()，用于实现小数点的功能。
具体执行过程如下：
首先，通过indexOf(‘.’)方法查找输入框内的小数点位置，并将结果存储在变量index中。
如果index的值为-1，表示小数点不存在于输入框内，此时会在输入框内的值末尾添加一个小数点。
如果index的值不为-1，表示小数点已经存在于输入框内，此时会将小数点移动到合适的位置。这是通过截取字符串实现的，将小数点前后的部分分别存储在newValue变量中，然后将newValue赋值给显示屏的值。

<script>
       function insertDecimalPoint() {
           var index = document.calculator.display.value.indexOf('.');
           if (index == -1) {
               document.calculator.display.value += '.';
           } else {
               var newValue = document.calculator.display.value.substring(0, index + 1) + document.calculator.display.value.substring(index + 1);
               document.calculator.display.value = newValue;
           }
       }
   </script>

七、单元测试

1.第一次做单元测试，对于怎样设计代码来测试还是有很多不懂之处，只能在各种网站参考很多方式，进行多种尝试，遇到非常多意外的情况，比如安装包下载不了，路径寻找不当等，都无法得出比较满意的结果，最后做出了两种尝试。
（1）在python的flask框架
借鉴了网络上的思路，但是还没有搞懂怎么同时处理，也不太懂得怎么测试覆盖率。
部分测试代码

def test_addition():
    with app.test_client() as client:
        response = client.get('/')
        response = client.post('/', data=b'3+4')  # 输入加法表达式并提交
        assert b'7' in response.data  # 检查计算结果是否正确

def test_multiplication():
    with app.test_client() as client:
        response = client.get('/')
        assert b'*' not in response.data  # 检查是否没有显示乘法符号
        response = client.post('/', data=b'3*4')  # 输入乘法表达式并提交
        assert b'12' in response.data  # 检查计算结果是否正确
        
def test_trigonometric_functions(self):
        with self.app as client:
            response = client.get('/')
            response = client.post('/', data=b'sin(')  # 输入正弦函数表达式并提交
            assert b'0.0' in response.data  # 检查计算结果是否正确
            response = client.post('/', data=b'cos(')  # 输入余弦函数表达式并提交
            assert b'1.0' in response.data  # 检查计算结果是否正确
            response = client.post('/', data=b'tan(')  # 输入正切函数表达式并提交
            assert b'0.0' in response.data  # 检查计算结果是否正确

只能做到逐个功能测试，得到单个结果
在这里插入图片描述

（2）在js中使用jest
而后又参考了Jest 进行前端单元测试

  1. package.json 中的命令
{
  "devDependencies": {
    "jest": "^29.7.0",
    "jsdom": "^22.1.0"
  },
  "scripts": {
    "test": "jest",
    "coverage": "jest --coverage"
  }
}

2.测试代码
因为我的运算符设计思路和参考的博客不太相同，测试代码自行做了修改，部分展示如下

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Calculator from './Calculator';

test('Calculator', () => {
  it('should calculate the cosine of the input value', () => {
    const { getByText } = render(<Calculator />);
    const input = getByText('input');
    fireEvent.change(input, { target: { value: '0' } });
    const result = getByText('结果：');
    expect(result).toHaveTextContent('1');
  });
});


test('Button', () => {
        it('should increment the display value by 1', () => {
          const calculator = {
            display: {
              value: ''
            }
          };
          document.querySelector('input[type="button"][value="1"]').click(); // 模拟点击按钮
          expect(calculator.display.value).toBe('1'); // 断言计算器的显示值应该增加1
        });
      });

部分功能测试结果如下

 PASS  ./Calculator.test.js
  Calculator
    ✓ should clear the input field when the CE button is clicked (2ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.355s


 PASS  ./Calculator.test.js
  Calculator
    ✓ should calculate the sine of the input value (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.456s

覆盖率

八、异常处理

文本框输入异常处理:通过try-catch块来捕获可能发生的异常。在calculate()函数中，首先获取文本框的值，然后执行计算逻辑，并将结果显示在文本框中。如果在任何时候发生异常，它将被catch块捕获，并显示一个包含错误消息的警告。

function calculate() {
            try {
                // 获取文本框的值
                var displayValue = document.calculator.display.value;
                //计算逻辑
                // ...
                // 将结果显示在文本框中
                document.calculator.display.value = result;
            } catch (error) {
                // 处理异常情况
                alert("发生错误：" + error.message);
            }
        }

九、心得体会

作为一个初次接触开发的人，在此计算器作业任务的设计过程中，我入手时多有迷茫，对于开发的流程也有很多不熟悉甚至不知道的地方。但是努力从多方了解资料，在不断探索的过程中，我学习到了很多前端的知识，但因为学习时间不够长，我只能尽力实现任务要求中的功能，保证了功能的完整性，但是无法做太多性能效率方面的改进，也有很多不合理之处。
同时，这也是我第一次尝试为自己写的代码做单元测试，查找了较多资料，也了解了几种测试的方法，虽然尝试的过程中遇到了很多不懂的地方，花费了大量时间，也出现过实现不了的情况，但不断的尝试也让我对测试的概念和方法有了更多的了解。但是我知道自己写的代码还有很多很多很多不足之处。希望在下一次作业到来之前我能尽可能地学习更多开发知识，真正理解开发的流程，做出更加完整的，符合规范的项目。

102101203-任怡婷
关注
编写简单的计算器功能的程序
qq_61168152的博客
04-26 4709
使用switch语句实现简单的加减乘除 具体代码如下： #include<stdio.h> int main() { int date1, date2; char op; printf("Please enter an expression:"); scanf("%d%c%d", &date1, &op, &date2); switch (op) { case '+': printf("%d+%d=%d\n", date1, date2,
JavaScript实现简单计算器
qq_39299605的博客
12-23 506
JavaScript实现简单的计算器（一） 效果图 在输入框中分别输入整数后点击下方的按钮就可以将结果显示在下方的结果框中 html部分 <span>整数1：</span> <input type="text" id="number1"/><br /> <span>整数2：</span> <input type="text" id="number2"/> <div style="margin:
Java——GUI实验编程
Yun_Ge的博客
06-05 6173
一、实验目的 掌握常用GUI控制组件的使用方法。 掌握事件处理的方法。 了解swing控件的概念。 二、实验内容 1．编程包含一个标签和一个按钮，单击按钮时，标签的内容在"你好"和"再见"之间切换。 2．编程包含一个文本框和一个文本区域，文本框内容改变时，将文本框中的内容显示在文本区域中；在文本框中按回车键时，清空文本区域的内容。 3．编程包含一个复选按钮和一个普通按钮，复选按钮选中时，普通按...
软件工程作业——实现一个简单的图形化计算器
m0_67391063的博客
09-26 318
这个作业属于哪个课程 <班级的链接> 这个作业要求在哪里 https://bbs.csdn.net/forums/ssynkqtd-05?spm=1001.2014.3001.6685 这个作业的目标 完成一个具有可视化界面的计算器 其他参考文献 https://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html 文章目录1.界面展示2.PSP表格3.解题思路描述4.代码介绍与展示4.性能分析与改进5.单元测试与改
软件工程作业1——简易计算器
weixin_64285467的博客
09-29 265
完成一个具有可视化界面的计算器。功能：具有基本功能的计算器实现加、减、乘、除、归零基本操作。附加功能：具有科学计算的计算器实现次方、幂、三角函数等操作。
2023软工作业(一)——计算器
xz857的博客
09-28 429
心路历程：先想到的是GUI编程，之前只开发过Web，并没有windows GUI相关经验，然后去百度了解，搜索相关的资料，GUI的用法之类的，然后想到的表达式的处理，这是一个相对比较复杂的过程，我通过自己实现内部函数递归算法和调用库函数的方式实现了表达式的计算，这里面有很多细节需要考虑，不过我认为在这门课中本次任务的目标还是对GUI的使用，毕竟换个环境或者题目这些细节可能又需要重新去考虑。如： 表达式输入错误，返回的值无法表示时返回Inf，输入的值不在数学函数的定义域之内，用户和程序显示内容不同步等错误。
软工作业一——基于HTML、CSS、JS实现的简易计算器
m0_63273795的博客
09-29 184
首先，在项目的初始阶段，有一个确切的方向是关键，要通过搜索引擎或ai助手明确这个项目需要用的的技术，再查找关于该技术的资料，明确接下来的每一个阶段具体要做哪些工作，在项目刚开始的阶段，我没有了解关于前端开发的相关流程，误入歧途，在无关紧要的内容上耗费了很多时间。而进入开发过程后，难免会遇到各式各样的bug，我曾多次在前端的各类开发工具上因版本的缘故出错，在通过查找国内外博客和github上文档对版本和各类函数运用的说明后，逐一解决了问题，虽然过程极为艰辛，但也培养了我耐心阅读开发文档的能力。
软工作业——计算器python实现
lit_1的博客
09-29 58
在本次作业中,首次使用了tkinter库进行GUI设计.知道了如何使用tkinter中各个控件的功能.了解到了一个开发一个计算器的基本流程.知道了如何使用单元测试对所使用的代码进行测试.题目要求设计一个计算器,要求实现加、减、乘、除、归零。在了解了相关知识后,我决定采用python语言实现以上功能。3.输出接口:采用Label控件进行将结果值进行输出,异常值输出’error’3.单元测试,引入unittest库进行测试代码编写进行实现。2.计算方式采用eval()函数进行实现。以下是计算器功能模块的代码。
软工作业2——实现前后端交互计算器
m0_67473148的博客
10-21 129
本次作业的任务目标是在上一个作业的完成的计算器的基础上，增加功能并且实现前后端的分类。本次作业前端依然使用html,css,js，在上一次作业的基础上进行改进，后端选择了django框架进行开发。
嵌入式工程师成长之路（3）——PCB设计
热门推荐
云轩阁
01-26 5万+
带有目的的学：要知道，PCB板子做出来需要我们给厂家哪些东西，我们设计板子的时候，需要遵循哪些设计规范，防止画好也是块废板子。然后再逐步开始学习画板。
嵌入式工程师成长之路（10）——项目举例
云轩阁
02-27 3万+
送给大学毕业后找不到奋斗方向的你（每周不定时更新）
ERP系统之比较——SAP Oracle BAAN JDE SSA
hfdgjhv的博客
01-30 1203
ERP系统之比较——SAP Oracle BAAN JDE SSA
SIC：智能包装系统——降低成本、提高效率的行业级功能（2022）
软件X 20（2022）101241原始软件出版物SIC：具有行业级功能的智能包装系统Juan Carlos Pachón，Juan Martínez-Franco，David Álvarez-MartínezLos Andes大学工程学院，Cra 1 No18 A-12 Bogotá D.C，哥伦比亚ar ...
软件工程导论——实验报告（终结版）
jiangzhoushiji的专栏
06-19 5942
学    院 __新媒体学院___     专     业 __网络工程___ 班    级 ____ 2 班_____      学     号   120708216  姓    名    王立华     _     同组同学 ____虞邦瑞     指导教师____徐  强_____             1.题目：简单计算器（逆波兰） 2.设计任务、要求 制作一个软
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1199
讲解CSS中的一般布局以及浮动布局
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 293
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
html 中如何使用 uniapp 的部分方法
weixin_59685936的博客
09-11 345
好了，现在就可以 uni. 使用相关的方法了。
【HTML】Html标签
最新发布
千里之行，始于足下
09-12 994
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
UML经典教程：自定义设计模式——数列计算器案例
"本篇UML教程聚焦于'自己的设计模式——数列计算器（Series Calculator）'，主要讲解了面向对象建模及其在软件开发中的应用。首先，它介绍了面向对象方法的基本概念，如对象、类、属性、行为、抽象、继承性、封装和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值