基于HTML,CSS,JS实现基本计算器

目录

解题思路

PSP表格

设计实现过程

程序性能改进

单元测试展示

结论与收获

---

画面展示

作业链接

解题思路

1.本想着使用java实现,但认为java实现不如html,css,js来的方便,而且界面也更好看

2.将网页打包成exe可执行文件上传(作业要求)

在开始编写代码之前，让我们首先梳理一下解题思路：

1. 创建一个HTML页面，包括显示屏和按钮。
2. 使用CSS样式来设计页面，使其外观漂亮。
3. 使用JavaScript编写逻辑，实现计算器的基本功能。
4. 添加按钮点击事件处理程序，以便用户可以与计算器进行交互。
5. 测试计算器的各种功能，确保它可以正确执行各种计算。

PSP表格

在项目的不同阶段，我使用了PSP（Personal Software Process）表格来跟踪工作量和时间分配。以下是一个简化的PSP表格示例:

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

设计实现过程

       HTML结构

我们首先创建了一个基本的HTML页面结构，其中包括显示屏和各种按钮，每个按钮都有一个点击事件处理程序。这是页面的基本布局。

<!-- HTML结构 -->
<div id="calculator">
    <!-- 输入框 -->
    <input type="text" id="display" disabled>
    <!-- 按钮部分 -->
</div>

        CSS样式

       这里对按钮的css样式做了特殊处理,当鼠标悬停时和非悬停时做了处理,当用户将鼠标悬停在按钮元素上时，样式规则将会应用。这允许你在用户与按钮交互时应用特定的样式，此时按钮会变成深蓝色,交互式体验更好!。

        /* 非鼠标悬停时 */
        input[type="button"] {
            width: 50px;
            height: 50px;
            font-size: 20px;
            margin: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        /* 鼠标悬停时 */
        input[type="button"]:hover {
            background-color: #0056b3;
        }

        JavaScript逻辑

编写JavaScript代码来实现计算器的各种功能。我们定义了一些关键的函数，例如 appendToDisplay 用于向显示屏添加内容，calculate 用于执行计算，calculatePower 用于幂运算，以及三角函数的计算函数。

<script>
        // 将点击的字符拼接到display的后面
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }
        // 清除display中的内容,即清空
        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        function calculate() {
            try {
                // 获取显示框中的表达式
                const expression = document.getElementById('display').value;
                //eval 函数用于执行用户在计算器中输入的数学表达式，将其解释为JavaScript代码并计算结果
                const result = eval(expression);
                document.getElementById('display').value = result;
            } catch (error) {
                // 计算出现的错误直接catch并在显示框中显示错误,提示用户
                document.getElementById('display').value = '错误';
            }
        }
        // 次幂的计算
        function calculatePower(power) {
            const value = document.getElementById('display').value;
            // 利用Math.pow()
            document.getElementById('display').value = Math.pow(parseFloat(value), power);
        }
        // 三角函数的计算
        function calculateTrigFunction(func) {
            // 简单使用系统自带的sin,cos,tan来进行计算
            const value = document.getElementById('display').value;
            if (func === 'sin') {
                document.getElementById('display').value = Math.sin(parseFloat(value));
            } else if (func === 'cos') {
                document.getElementById('display').value = Math.cos(parseFloat(value));
            } else if (func === 'tan') {
                document.getElementById('display').value = Math.tan(parseFloat(value));
            }
        }
    </script>

利用eval函数来对字符串表达式进行数学运算

// 获取显示框中的表达式
                const expression = document.getElementById('display').value;
                //eval 函数用于执行用户在计算器中输入的数学表达式，将其解释为JavaScript代码并计算结果
                const result = eval(expression);
                document.getElementById('display').value = result;

 利用js自带函数计算幂次和三角函数

// 次幂的计算
        function calculatePower(power) {
            const value = document.getElementById('display').value;
            // 利用Math.pow()
            document.getElementById('display').value = Math.pow(parseFloat(value), power);
        }
        // 三角函数的计算
        function calculateTrigFunction(func) {
            // 简单使用系统自带的sin,cos,tan来进行计算
            const value = document.getElementById('display').value;
            if (func === 'sin') {
                document.getElementById('display').value = Math.sin(parseFloat(value));
            } else if (func === 'cos') {
                document.getElementById('display').value = Math.cos(parseFloat(value));
            } else if (func === 'tan') {
                document.getElementById('display').value = Math.tan(parseFloat(value));
            }
        }

程序性能改进

1.避免全局变量：

        尽量减少全局变量的使用，因为它们可以导致命名冲突和不必要的内存占用。

2.CSS和JavaScript的内联：

        CSS和JavaScript代码内联到HTML文件中，而不是将它们作为外部文件加载。这可以减少HTTP请求次数，从而加快页面加载速度。

单元测试展示

在编写代码时，我使用了单元测试来验证每个函数的正确性

测试

<script>
        function runSimpleTests() {
            testClearDisplay();
            testCalculate();
            testCalculatePower();
            testCalculateTrigFunction();
        }

        // 测试清空是否成功
        function testClearDisplay() {
            document.getElementById('display').value = '123';
            clearDisplay();
            if (document.getElementById('display').value === '') {
                console.log('clearDisplay test passed');
            } else {
                console.error('clearDisplay test failed');
            }
        }
        // 测试简单加法计算
        function testCalculate() {
            document.getElementById('display').value = '2+3';
            calculate();
            if (document.getElementById('display').value === '5') {
                console.log('calculate test passed');
            } else {
                console.error('calculate test failed');
            }
        }
        
        // 测试次方的结果
        function testCalculatePower() {
            document.getElementById('display').value = '4';
            calculatePower(2);
            if (document.getElementById('display').value === '16') {
                console.log('calculatePower test passed');
            } else {
                console.error('calculatePower test failed');
            }
        }
    
        // 测试计算三角函数是否正确
        function testCalculateTrigFunction() {
            document.getElementById('display').value = '0';
            calculateTrigFunction('sin');
            if (document.getElementById('display').value === '0') {
                console.log('calculateTrigFunction (sin) test passed');
            } else {
                console.error('calculateTrigFunction (sin) test failed');
            }

            document.getElementById('display').value = '45';
            calculateTrigFunction('cos');
            if (document.getElementById('display').value === '0.5253219888177297') {
                console.log('calculateTrigFunction (cos) test passed');
            } else {
                console.error('calculateTrigFunction (cos) test failed');
            }

            document.getElementById('display').value = '45';
            calculateTrigFunction('tan');
            if (document.getElementById('display').value === '1.6197751905438615') {
                console.log('calculateTrigFunction (tan) test passed');
            } else {
                console.error('calculateTrigFunction (tan) test failed');
            }
        }
        // 当页面加载时执行这些函数,通过控制台输出判断结果
        window.onload = runSimpleTests;
</script>

结论与收获

在这个项目中，我学到了如何使用HTML、CSS和JavaScript构建一个简单的科学计算器。通过实际的项目实践，我加深了对前端开发的理解，学到了如何设计页面、处理用户交互以及进行单元测试。

同时我也学会了如何将web页面打包成exe可执行文件,可谓是收获颇多!

使用HTML2EXE