网页版计算器

---

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/forums/ssynkqtd-05?spm=1001.2014.3001.6685
这个作业的目标	完成一个具有可视化界面的计算器
其他参考文献	https://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html

---

---

calculator

完成一个具有可视化界面的计算器。

---

1.Gitcode项目地址

https://gitcode.net/diudiuyouyou/1/-/tree/master/

2.界面展示

3.PSP表格

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

4.解题思路描述

题目要求完成一个具有可视化界面的计算器，其基本功能包括可以实现加、减、乘、除、归零的基本操作以及次方、幂、三角函数等操作。

1. 编程语言选择
   一开始查阅了大量资料，尝试了用Python的GUI框架来实现，但是界面的美观无法得到充分满足。最终选择html+css+js来实现，更容易实现界面的美观。
2. 界面设计
   为了使界面更美观，在编写代码前，我先确定了界面的基本布局，每个button的大小，位置，颜色等。
3. 核心功能
   实现加减乘除、次方、幂、三角函数、开方，利用js自带的函数与eval函数计算结果。
4. exe打包
   应作业要求，使用软件HTML2EXE将html文件生成exe文件上交。

5.设计与实现过程

1. 将界面分为显示计算与操作按钮，点击不同按钮就会执行相应函数，定义如下。

代码如下：

<div class="calculator">
        <input type="screen" id="display" readonly>
        <div class="buttons">
            <!-- 第一行 -->
            <button class="function" onclick="clearl()">AC</button>
            <button class="function" onclick="del()">←</button>
            <button onclick="append('+')">+</button>
            <button onclick="append('-')">-</button>
            <button onclick="append('*')">×</button>
            <!-- 第二行 -->
            <button onclick="append('/')">÷</button>
            <button class="function" onclick="cif1()">x²</button>
            <button onclick="append('7')">7</button>
            <button onclick="append('8')">8</button>
            <button onclick="append('9')">9</button>
            <!-- 第三行 -->
            <button class="function" onclick="cif2()">x³</button>
            <button class="function" onclick="sqrt()">√</button>
            <button onclick="append('4')">4</button>
            <button onclick="append('5')">5</button>
            <button onclick="append('6')">6</button>
            <!-- 第四行 -->
            <button class="function" onclick="jic()">X!</button>
            <button class="function" onclick="sin()">sin</button>
            <button onclick="append('1')">1</button>
            <button onclick="append('2')">2</button>
            <button onclick="append('3')">3</button>
            <!-- 第五行 -->
            <button class="function" onclick="cos()">cos</button>
            <button class="function" onclick="tan()">tan</button>
            <button onclick="append('.')">.</button>
            <button onclick="append('0')">0</button>
            <button class="equal" onclick="calculate()">=</button>
        </div>
    </div>

2. 定义函数，实现不同功能。
   ①每按一次按钮，就向显示屏增加一个字符。

代码如下：

function append(value) {
    document.getElementById('display').value += value;
}

②按下“=”，利用eval计算结果。

代码如下：

function calculate() {
    try {
        const currentElement = document.getElementById('display').value;
        const result = eval(currentElement);
        document.getElementById('display').value = result;
    }
    catch (error) {
        document.getElementById('display').value = 'error';
    }
}

③清空显示屏与删除最后一位函数实现。
代码如下：

function clearl() {
    document.getElementById('display').value = '';
}
function del() {
    let currentElement = document.getElementById('display').value;
    if (!currentElement.length)
        return
    currentElement = currentElement.slice(0, -1);
    document.getElementById('display').value = currentElement;
}

④利用JavaScript自带的函数实现次方、幂运算。
代码如下：

function cif1() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.pow(parseFloat(value), 2);
}
function cif2() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.pow(parseFloat(value), 3);
}

⑤实现阶乘运算。
代码如下：

function jic() {
    const currentElement = document.getElementById('display').value;
    let result = 1;
    for (var i = 1; i <= currentElement; i++) {
        result *= i;
    }
    document.getElementById('display').value = result;
}

⑥利用JavaScript自带的函数实现三角函数运算。
代码如下：

function sin() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.sin(parseFloat(value));
}
function cos() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.cos(parseFloat(value));
}
function tan() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.tan(parseFloat(value));
}

⑦利用JavaScript自带的函数实现开方运算。
代码如下：

function sqrt() {
    const value = document.getElementById('display').value;
    document.getElementById('display').value = Math.sqrt(parseFloat(value));
}

⑧打包成exe。

---

5.程序性能改进

1. 最开始的代码无法计算“1+2+3”这样的式子，它只适用于两位数之间的运算。之后将代码改写，使其能自动读输入的符号，再利用eval函数求出结果。

function append(value) {
    document.getElementById('display').value += value;
}
function calculate() {
    try {
        const currentElement = document.getElementById('display').value;
        const result = eval(currentElement);
        document.getElementById('display').value = result;
    }
    catch (error) {
        document.getElementById('display').value = 'error';
    }
}

2. 利用CSS实现界面的可视化，要注意不同模块之间的影响。如何使calculator居中显示。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
}

6.心路历程与收获

连续输入两个运算符即不符合正确运算规则会报错。

用以下代码实现

function calculate() {
            try {
                const currentElement = document.getElementById('display').value;
                const result = eval(currentElement);
                document.getElementById('display').value = result;
            }
            catch (error) {
                document.getElementById('display').value = 'error';
            }
        }

7.心路历程与收获

本次任务是完成一个具有可视化界面的计算器——可以计算加减乘除、平方、幂、三角函数等。
首先，出于对“可视化”的理解，我花了一定的时间在UI上，旨在呈现出更美观的界面。
接着，在完成这项任务的过程中，我遇到了许多问题，通过查找资料基本都顺利解决了。
最后，我不仅在一定程度上提高了自己在HTML、CSS和JavaScript的编程能力，加深了对前端开发的理解，而且也学会了设计测试用例，编写单元测试，对自己的项目进行测试。