作业基本信息
这个作业属于哪个课程 | <班级的链接> |
---|---|
这个作业要求在哪里 | https://bbs.csdn.net/topics/617294583 |
这个作业的目标 <写上具体方面> | 完成一个具有可视化界面的科学计算器 |
其他参考文献 … | https://www.cnblogs.com/xinz/archive/2011/10/22/2220872.html |
0.Gitcode项目地址
1.PSP表格
PSP | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
Planning | 计划 | 20 | 30 |
• Estimate | • 估计这个任务需要多少时间 | 20 | 15 |
Development | 开发 | 420 | 480 |
• Analysis | • 需求分析 (包括学习新技术) | 120 | 150 |
• Design Spec | • 生成设计文档 | 10 | 10 |
• Design Review | • 设计复审 | 10 | 10 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 15 | 20 |
• Design | • 具体设计 | 30 | 20 |
• Coding | • 具体编码 | 80 | 120 |
• Code Review | • 代码复审 | 20 | 30 |
• Test | • 测试(自我测试,修改代码,提交修改) | 60 | 80 |
Reporting | 报告 | 20 | 20 |
• Test Repor | • 测试报告 | 40 | 50 |
• Size Measurement | • 计算工作量 | 20 | 20 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 20 | 15 |
合计 | 905 | 1070 |
2.界面展示
3.解题思路描述
要实现一个可视化的计算器有着许多的方法,我的第一反应是可以利用Python或者html,css和javascript来进行实现。Python 的语法简单明了,易于理解和编写,有大量的第三方库和工具,可以快速构建应用程序,但是Python制作的计算器界面相对简洁,缺少一定的美感,缺乏观赏性。再加上对于上述的两中语言,我的接触都相对较少。html,css和javascript作为主流的前端开发工具,我对此也是非常感兴趣。因此为了追求相对更为有美感的界面和自身的兴趣,我选择了用html,css和javascript来进行开发。
1.HTML
使用 div 元素和 class 属性来定义计算器的布局和样式,用到button来定义计算器的按钮操作,再定义屏幕显示界面。
2.CSS
运用CSS来对计算机的样式进行修改,调整,对其相应的背景颜色,字体大小,字体颜色等进行修改完善,使计算器的外观更为优美。
3.JavaScript
使用 JavaScript 来实现计算器的功能。在点击数字按钮时可以将数字添加到显示屏幕上中,在点击运算符按钮时执行相应的运算操作。实现清零运算,sin,cos等三角函数运算和幂运算等操作。
4.实现过程
1.先简单的利用html画出一个计算器的框架。使用 div和 class 来定义计算器的布局和样式。再用container 类用于包裹整个计算器。display-screen 类用于显示显示屏,button 类用于定义按钮的,btn-operator 类用于定义运算符按钮,btn-number 类用于定义数字按钮,btn-equal 类用于定义等号按钮。
2.对画出的计算器框架进行美化,可以使用color、background、box-shadow等属性来设置计算器的样式。可以使用 CSS 选择器来选择不同的元素,并为其设置相应的样式属性,如 background-color、color、font-size 等。
3.创建 使用 JavaScript 来实现计算器的功能。在点击数字按钮时将数字添加到输入框中,点击运算符按钮时执行相应的运算操作等。用JavaScript中的内置函数来实现加法等基本四则运算,通过调用第三方库来实现sin,cos等更为复杂的计算,使用 innerHTML 属性来修改输入框中的值。
5.关键代码
1)HTML构造计算器框架
<tr>
<td><button class="btn-operator" id="x^2">x^2</button></td>
<td><button class="btn-operator" id="x^3">x^3</button></td>
<td><button class="btn-operator" id="x^y">x^y</button></td>
<td><button class="btn-operator" id="clear">C</button></td>
<td><button class="btn-operator" id="/">÷</button></td>
<td><button class="btn-operator" id="*">×</button></td>
<td><button class="btn-operator" id="backspace"><</button></td>
</tr>
<tr>
<td><button class="btn-operator" id="x!">x!</button></td>
<td><button class="btn-operator" id="√">√</button></td>
<td><button class="btn-operator" id="%">%</button></td>
<td><button class="btn-number" id="7">7</button></td>
<td><button class="btn-number" id="8">8</button></td>
<td><button class="btn-number" id="9">9</button></td>
<td><button class="btn-operator" id="-">-</button></td>
</tr>
<tr>
<td><button class="btn-operator" id="e">e</button></td>
<td><button class="btn-operator" id="ln">ln</button></td>
<td><button class="btn-operator" id="log">log</button></td>
<td><button class="btn-number" id="4">4</button></td>
<td><button class="btn-number" id="5">5</button></td>
<td><button class="btn-number" id="6">6</button></td>
<td rowspan="2"><button class="btn-operator" id="jia">+</button></td>
</tr>
<tr>
<td><button class="btn-operator" id="sin">sin</button></td>
<td><button class="btn-operator" id="cos">cos</button></td>
<td><button class="btn-operator" id="tan">tan</button></td>
<td><button class="btn-number" id="1">1</button></td>
<td><button class="btn-number" id="2">2</button></td>
<td><button class="btn-number" id="3">3</button></td>
</tr>
<tr>
<td><button class="btn-operator" id="x^4">x^4</button></td>
<td><button class="btn-operator" id="x^5">x^5</button></td>
<td><button class="btn-operator" id="Π">Π</button></td>
<td><button class="btn-number" id="0">0</button></td>
<td><button class="btn-operator" id=".">.</button></td>
<td colspan="2"><button class="btn-equal" id="equal">=</button>
</tr>
2)实现计算器功能的js代码
function log(x) {
const result = Math.log10(display.innerText).toFixed(6);
display.innerText = result;
}
function ln(x) {
const result = Math.log(x).toFixed(6);
display.innerText = result;
}
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
function clear(){
display.innerText = ''
}
function backspace(){
let string = display.innerText.toString();
display.innerText = string.substr(0, string.length - 1);
}
function sin(){
const radians = display.innerText * Math.PI / 180;
const result = Math.sin(radians).toFixed(6);
display.innerText = result;
}
function cos(){
const radians = display.innerText * Math.PI / 180;
const result = Math.cos(radians).toFixed(6);
display.innerText = result;
}
function tan(){
const radians = display.innerText * Math.PI / 180;
const result = Math.tan(radians).toFixed(6);
display.innerText = result;
}
function x_2(){
const result = display.innerText**2;
display.innerText = result;
}
function x_3(){
const result = display.innerText**3;
display.innerText = result;
}
function x_4(){
const result = display.innerText**4;
display.innerText = result;
}
function x_5(){
const result = display.innerText**5;
display.innerText = result;
}
function x_y(){
display.innerText += '**';
}
function jiecheng(){
display.innerText = factorial(display.innerText) ;
}
function sqrt_2(){
display.innerText = Math.sqrt(display.innerText) ;
}
function bf(){
display.innerText = display.innerText*0.01;
}
function jia(){
display.innerText += "+";
}
function sub(){
display.innerText += "-";
}
function mul(){
display.innerText += "*";
}
function div(){
display.innerText += "/";
}
function number(item){
display.innerText += item.id;
}
function dian(item){
display.innerText += item.id;
}
function e(){
display.innerText=Math.exp(1).toFixed(6)
}
function PI(){
display.innerText=Math.PI.toFixed(6)
}
function equal(){
display.innerText = eval(display.innerText);
}
6.性能改进
function log(x) {
const result = Math.log10(display.innerText).toFixed(6);
display.innerText = result;
}
function ln(x) {
const result = Math.log(x).toFixed(6);
display.innerText = result;
}
function sin(){
const radians = display.innerText * Math.PI / 180;
const result = Math.sin(radians).toFixed(6);
display.innerText = result;
}
function cos(){
const radians = display.innerText * Math.PI / 180;
const result = Math.cos(radians).toFixed(6);
display.innerText = result;
}
function tan(){
const radians = display.innerText * Math.PI / 180;
const result = Math.tan(radians).toFixed(6);
display.innerText = result;
}
对于sin、cos、tan等三角函数,在计算时会出现精度丢失的问题。这是因为计算机中浮点数的表示和计算都是基于二进制的,而某些十进制小数在二进制下无法精确表示。为了保证相应的精度准确,我采用了限制其计算后的结果保留位数位数,以此来提高精度。
7.单元测试
运用了一些相对简单的样例进行测试,以上是得到单元测试的结果图,所有的测试函数均已通过且覆盖率达标。
8.异常处理
function equal(){
display.innerText = eval(display.innerText);
if(display.innerText=='Infinity') display.innerText='ERROR';
}
在除法运算中,除数不可为零。对于在上述除以零所得到的Infinity结果,对其进行判定后输出"ERROR"。
9.心得体会
这是我第一次使用HTML、CSS、JavaScript来制作一个计算器。在这次作业中,我的编程能力得到了提高,对于前端的技术也有了更多的理解。了解了HTML、CSS、JavaScript三件套之间的相辅相成的作用。在制作计算器的过程中,我对于写代码过程中的逻辑思维和解决问题的能力得到了提高。总的来说,制作一个计算器是一项有挑战性的项目,但也是一次有益的学习和实践机会,让我对前端的知识有了更多的兴趣,学会了很多新的知识,收获颇丰,我相信这些经验和技能将对我的未来发展产生积极的影响。
…