6.18更新:学了一段时间MFC以后,把此四则运算转换成了可视化图形界面版本的自动生成程序,源程序已经上传到Github上,下面是程序运行截图;html
整形数据前端
分数java
主要是要调用MFC的一些接口和原本的程序代码进行绑定,逻辑上和本来的网页端差很少只是语法上有必定的差别。c++
下面是原博客内容:git
以前准备是界面用HTML等搭建,而后执行c++编译后的exe文件,进行数据间的传递,达到可视化的效果。这是对界面库一无所知的小白最初的想法。可是事情远远没有这么简单!github
任务:将本来的四则运算(c++版本)拓展为网页版。bootstrap
一、GitHub:https://github.com/1120161970/Calculate浏览器
二、时间耗费 :框架
PSP2.1dom |
Personal Software Process Stages |
预估耗时(min) |
实际耗时(min) |
Planning |
计划 |
30 |
|
Estimate |
估计这个任务须要多少时间 |
1200 |
|
Development |
开发 |
600 |
|
Analysis |
需求分析(包括学习新技术) |
120 |
|
Design Spec |
生成设计文档 |
30 |
|
Design Review |
设计复审(和同事审核设计文档) |
10 |
|
Coding Standard |
代码规范(为目前的开发制定合适的规范) |
10 |
|
Design |
具体设计 |
30 |
|
Coding |
具体编码 |
120 |
|
Code Review |
代码复审 |
30 |
|
Test |
测试(自我测试,修改代码,提交修改) |
120 |
|
Reporting |
报告 |
30 |
|
Test Report |
测试报告 |
10 |
|
Size Measurement |
计算工做量 |
10 |
|
Postmortem & Process Improvement Plan |
过后总结,并提出过程改进计划 |
30 |
|
|
合计 |
|
三、解题思路:
四、设计实现过程
五、性能改进及思路
六、代码说明(思路解释+注释说明)
var clearmsg = false; var ispoint = true; function show(obj){ var data = obj.value; var text = document.getElementById("text"); if(clearmsg){ text.value = ""; clearmsg=false; } if(data == "+" || data == "-" || data == "*" || data == "/"){ ispoint = true; } if(data == "0" && text.value == "0"){ text.value = parseInt(text.value) + 0; }else if(text.value == "0" && data != "+" && data != "-" && data != "*" && data != "/"){ text.value = parseInt(text.value) + parseInt(data); }else{ text.value += data; } } //计算结果 function getResult(){ var data = document.getElementById("text"); try{ ispoint = true; data.value = eval(data.value); clearmsg = true; //alert(ispoint); }catch(err){ alert("这怎么算!"); data.value = "0"; } } //点 function point(){ var p = document.getElementById("."); var text = document.getElementById("text"); if(ispoint){ text.value += p.value; ispoint = false; } //if(text.value.indexOf(".") == true ){ //}else{ // text.value += p.value; //} } //清空 function funclear(){ var a = document.getElementById("text").value = "0"; clearmsg = false; ispoint = true; //if(a==null || a==""){ // alert("null"); //}else{ // alert(a); //} } //退格键 function funback(){ var text = document.getElementById("text"); if(text.value == "0" || text.value == ""){ text.value = "0"; }else{ document.getElementById("text").value=document.getElementById("text").value.slice(0,-1); } }
上面是运用js写的运算逻辑,而后最后的界面是这样的:
能够完成基本的四则运算,可是对于浮点数的表示就简单采起的四舍五入式。
2. 改进后的四则运算生成的JavaScript代码:
function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } // 获取随机数 function max_num(x,y) { var t; while (y) { t = x%y; x = y; y = t; } return x; } function fenshu(a,b,p) { if (p==1) { if (a>b) { return a+"/"+b; }else if(a<b){ return a+"/"+b; }else { return 1; } }else { var x=a/p; var y=b/p; if(y==1){ return x; }else{ return x+"/"+y; } } } function f_count(a,b,c,d) { var Arr = ["+","-","*","/"]; var n = GetRandomNum(0,3); switch(Arr[n]){ case "+":{ var sum_x=(a*d)+(b*c); var sum_y=b*d; max_x=max_num(sum_x,sum_y); max_y=max_num(sum_x,sum_y); var N=fenshu(sum_x,sum_y,max_x); return a+"/"+b+"+"+c+"/"+d+"="+N; break; } case "-":{ var sum_x=(a*d)-(b*c); while (sum_x<0) { var a = GetRandomNum(1,30); var b = GetRandomNum(1,30); var c = GetRandomNum(1,30); var d = GetRandomNum(1,30); var sum_x=(a*d)-(b*c); } var sum_y=b*d; max_x=max_num(sum_x,sum_y); max_y=max_num(sum_x,sum_y); var N=fenshu(sum_x,sum_y,max_x); return a+"/"+b+"-"+c+"/"+d+"="+N; break; } case "*":{ var sum_x=a*c; var sum_y=b*d; max_x=max_num(sum_x,sum_y); max_y=max_num(sum_x,sum_y); var N=fenshu(sum_x,sum_y,max_x); return a+"/"+b+"*"+c+"/"+d+"="+N; break; } case "/":{ var sum_x=a*d; var sum_y=b*c; max_x=max_num(sum_x,sum_y); max_y=max_num(sum_x,sum_y); var N=fenshu(sum_x,sum_y,max_x); return a+"/"+b+"÷"+c+"/"+d+"="+N; break; } } } function count(a,b){ var Arr = ["+","-","*","/"]; var n = GetRandomNum(0,3); switch(Arr[n]){ case "+":{ var sum=a+b; return a+"+"+b+"="+sum; break; } case "-":{ var sum=a-b; while(sum<0){ var a = GetRandomNum(1,30); var b = GetRandomNum(1,30); var sum=a-b; } return a+"-"+b+"="+sum; break; } case "*":{ var sum=a*b; return a+"*"+b+"="+sum; break; } case "/":{ var sum=a/b; while(a%b!==0){ var max_x=max_num(a,b); var N=fenshu(a,b,max_x); return a+"÷"+b+"="+N; } return a+"÷"+b+"="+sum; break; } } } function pl_f() { var son_a = GetRandomNum(1,30); var par_b = GetRandomNum(1,30); var son_c = GetRandomNum(1,30); var par_d = GetRandomNum(1,30); var suma=f_count(son_a,par_b,son_c,par_d); return suma; } function pl() { var a = GetRandomNum(1,30); var b = GetRandomNum(1,30); var sumb=count(a,b); return sumb; } function play_all() { // var flag = 0; var a = document.getElementById("tp").value; var inta = parseInt(a); for (i = 1; i <= inta; i++) { var a = GetRandomNum(0,1); document.getElementById("text").innerHTML+=("<br>"+"第"+i+"题:"); switch (a) { case 0: var A=pl(); var strs = A.split("="); document.getElementById("text").innerHTML+=(strs[0]+"="+"<input>"+"<button>提交</button>"+"<br>"); document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"题答案:"+"<span>"+strs[1]+"</span>"+"<br>"); break; case 1: var B=pl_f(); var strs = B.split("="); document.getElementById("text").innerHTML+=(strs[0]+"="+"<input>"+"<button>提交</button>"+"<br>"); document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"题答案:"+"<span>"+strs[1]+"</sapn>"+"<br>"); break; } } }
前台界面就用bootstrap框架简单搭建了一个,最终的界面是这样的:
测试了最大的数目前是2000,超过这个的话浏览器容易崩溃,多是js不大适合直接拿来作逻辑运算吧。仍是有待提高。会在后续进一步更新
七、实际耗时
PSP2.1 |
Personal Software Process Stages |
预估耗时(min) |
实际耗时(min) |
Planning |
计划 |
30 |
25 |
Estimate |
估计这个任务须要多少时间 |
1200 |
1400 |
Development |
开发 |
600 |
700 |
Analysis |
需求分析(包括学习新技术) |
120 |
120 |
Design Spec |
生成设计文档 |
30 |
20 |
Design Review |
设计复审(和同事审核设计文档) |
10 |
15 |
Coding Standard |
代码规范(为目前的开发制定合适的规范) |
10 |
20 |
Design |
具体设计 |
30 |
40 |
Coding |
具体编码 |
120 |
200 |
Code Review |
代码复审 |
30 |
20 |
Test |
测试(自我测试,修改代码,提交修改) |
120 |
60 |
Reporting |
报告 |
30 |
30 |
Test Report |
测试报告 |
10 |
10 |
Size Measurement |
计算工做量 |
10 |
10 |
Postmortem & Process Improvement Plan |
过后总结,并提出过程改进计划 |
30 |
30 |
|
合计 |
1200 |
1300(目前) |