目录
作业基本信息
这个作业属于哪个课程 | https://bbs.csdn.net/forums/ssynkqtd-05?typeId=5171424 |
---|---|
这个作业要求在哪里 | https://bbs.csdn.net/topics/617377308 |
这个作业的目标 | 前后端交互计算器 |
其他参考文献 |
Gitcode项目地址
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等数据库技术所以无法实现数据库保存历史记录功能,只能暂时将其保存在数组中,以实现功能。