前后端分离计算器

最新推荐文章于 2024-08-16 16:05:19 发布

chencan84

最新推荐文章于 2024-08-16 16:05:19 发布

阅读量45

点赞数

文章标签：软件工程

本文链接：https://blog.csdn.net/chencan84/article/details/133977120

版权

作业基本信息

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05?typeId=5171424
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	前后端交互计算器
其他参考文献

Gitcode项目地址

gitee仓库

PSP表格

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

解题思路描述

问题1实现查看历史记录功能

思路：
创建一个用于显示历史记录的区域（一个div元素)。
使用JavaScript编写保存历史记录的函数，将每次计算的表达式和结果保存到数组中。
编写显示历史记录的函数，将保存的历史记录以列表或其他形式显示在界面上。

问题2实现错误提示功能

思路：
在计算过程中，添加错误检查的逻辑，例如除数为零、括号不匹配等。
当发现错误时，在界面上显示相应的错误提示信息。

关键代码展示

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly style="width: 300px; font-size: 30px;">
        <br>
        <button onclick="calculateTrig('sin')">sin</button>
        <button onclick="calculateTrig('cos')">cos</button>
        <button onclick="backspace()">←</button>
        <button onclick="clearDisplay()">C</button>
        <br>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperator('+')">+</button>
        <br>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperator('-')">-</button>
        <br>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperator('*')">*</button>
        <br>
        <button onclick="appendDecimal()">.</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="setOperator('/')">/</button>
        <br>
        <button onclick="appendSymbol('(')">(</button>
        <button onclick="appendSymbol(')')">)</button>
        <button onclick="calculateTrig('%')">%</button>
        <button onclick="calculateTrig('sqrt')">√</button>
    <div id="history" class="history-box"></div>
    <button onclick="showHistory()" style="width: 244px; height: 100px;">查看历史记录</button>
    <script src="script.js"></script>
</body>
</html>

css

.calculator {
    font-size: 20px;
    text-align: center;
    margin: 20px auto;
}
button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 5px;
}

js

let display = document.getElementById('result');
let historyBox = document.getElementById('history');
let currentNumber = '';
let operator = '';
let result = 0;
let history = [];

function appendNumber(num) {
    currentNumber += num;
    display.value = currentNumber;
}

function appendDecimal() {
    if (!currentNumber.includes('.')) {
        currentNumber += '.';
        display.value = currentNumber;
    }
}

function setOperator(op) {
    if (operator !== '') {
        calculateResult();
    }
    operator = op;
    result = parseFloat(currentNumber);
    currentNumber = '';
}

function appendSymbol(sym) {
    currentNumber += sym;
    display.value = currentNumber;
}

function calculateResult() {
    if (operator !== '' && currentNumber !== '') {
        let expression = `${result} ${operator} ${currentNumber} = ${calculate(result, operator, parseFloat(currentNumber))}`;
        let calculatedResult = calculate(result, operator, parseFloat(currentNumber));
        if (isNaN(calculatedResult)) {
            display.value = "Error: Invalid input";
            currentNumber = '';
            operator = '';
        } else {
            display.value = calculatedResult;
            saveToHistory(expression);
        }
    }
}

function calculate(num1, op, num2) {
    switch (op) {
        case '+':
            return num1 + num2;
        case '-':
            return num1 - num2;
        case '*':
            return num1 * num2;
        case '/':
            if (num2 === 0) {
                return NaN;
            } else {
                return num1 / num2;
            }
        default:
            return NaN;
    }
}

function checkForErrors() {
    let openParentheses = (currentNumber.match(/\(/g) || []).length;
    let closeParentheses = (currentNumber.match(/\)/g) || []).length;

    if (openParentheses !== closeParentheses) {
        display.value = "Error: Parentheses mismatch";
        return true;
    }

    return false;
}

function saveToHistory(expression) {
    history.push(expression);
}

function showHistory() {
    let historyContent = "<h2>历史记录</h2>";
    if (history.length === 0) {
        historyContent += "<p>暂无历史记录</p>";
    } else {
        historyContent += "<ul>";
        for (let i = 0; i < history.length; i++) {
            historyContent += `<li>${history[i]}</li>`;
        }
        historyContent += "</ul>";
    }
    historyBox.innerHTML = historyContent;
}

function clearDisplay() {
    currentNumber = '';
    operator = '';
    result = 0;
    display.value = '';
}

function calculateTrig(type) {
    let value = parseFloat(currentNumber);

    if (operator !== '') {
        calculateResult();
        value = result;
    }

    if (isNaN(value)) {
        display.value = "Error: Invalid input";
        return;
    }

    if (type === 'sin') {
        value = Math.sin(value * (Math.PI / 180));
    } else if (type === 'cos') {
        value = Math.cos(value * (Math.PI / 180));
    } else if (type === '%') {
        value = value / 100;
    } else if (type === 'sqrt') {
        if (value >= 0) {
            value = Math.sqrt(value);
        } else {
            display.value = "Error: Invalid input";
            return;
        }
    }

    display.value = value;
    let expression = `${type.toUpperCase()}(${value}) = ${value}`;
    saveToHistory(expression);
    currentNumber = value.toString();
}

function backspace() {
    currentNumber = currentNumber.slice(0, -1);
    display.value = currentNumber;
}

成果展示

基础运算

在这里插入图片描述

清零回退

在这里插入图片描述

错误提示

在这里插入图片描述

历史记录（未实现数据库）

在这里插入图片描述

心得体会

本次作业我在上次计算器的基础上加入了sin，cos，%，开根号等功能。
这次作业学会了用html，css，js三件套进行前后端基础项目的实现。
但是在这次作业中因为临时学习所以css基础薄弱导致页面简陋原始，
且未掌握mysql等数据库技术所以无法实现数据库保存历史记录功能，只能暂时将其保存在数组中，以实现功能。

chencan84

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端分离计算器

且未掌握mysql等数据库技术所以无法实现数据库保存历史记录功能，只能暂时将其保存在数组中，以实现功能。使用JavaScript编写保存历史记录的函数，将每次计算的表达式和结果保存到数组中。编写显示历史记录的函数，将保存的历史记录以列表或其他形式显示在界面上。本次作业我在上次计算器的基础上加入了sin，cos，%，开根号等功能。这次作业学会了用html，css，js三件套进行前后端基础项目的实现。在计算过程中，添加错误检查的逻辑，例如除数为零、括号不匹配等。当发现错误时，在界面上显示相应的错误提示信息。
复制链接

扫一扫