任务：用js写算法，实现一个网页四则运算计算器
效果：
成果链接：codepen@cuphoria
js实现思路：
- 定义一个用来存储表达式的全局变量expr和一个是否清空的全局变量clear
- 点击value为表达式组成部分的按钮，将value加入到表达式expr中
- 若按钮是ac ，ce则完成相应功能
- 若按钮是等号，调用表达式计算函数，并将结果返回到expr中，将clear置为true以便下次清空expr
表达式计算算法：
- 用split将字符串里的数和符号分别存在两个数组中
- 在定义两个数组充当符号栈，数值栈的功能
- 比较符号栈栈顶和当前符号的优先级，如果优先级高则当前符号入栈，否则弹出数字栈尾的两个数值和栈顶符号计算之后的结果入数值栈，符号栈栈顶出栈，进入下一次循环
代码： 1 var expr 2 var clear=false;
3 var token=/[/*-+]/g; 4 var digit=/[0-9]/; 5 var maxWidth=window.screen.width; 6 var maxHeight=window.screen.height; 7 function best(t)//优先级比较 8 { 9 if(t=="%") return 0; 10 if(t=="+"||t=="-") return 1; 11 if(t=="/"||t=="*") return 2; 12 } 13 function cal(expr) 14 { 15 var num=expr.split(token);//数值分割出字符串成立数组 16 var t=expr.split("");//符号同 17 t=t.filter(function(val) {return !digit.test(val);}); 18 var numarr=[],tarr=[]; 19 tarr.push("%");//定义一个栈顶符号，优先级最低 20 var i=0,j=0; 21 var top=tarr.length; 22 numarr.push(parseInt(num[j],10));//第一个数值先入栈 23 while(top!=1||i!=t.length)//当符号栈只剩下一个符号，所有符号都运算完毕时，退出循环 24 { 25 top=tarr.length-1;//每次更新栈顶长度下标
26 if(best(t[i])>best(tarr[top])) {tarr.push(t[i]);numarr.push(parseInt(num[++j],10));++i;}//比较优先级高时 28 else 29 { 30 var a=numarr[numarr.length-1];//优先级小于等于时 31 var b=numarr[numarr.length-2]; 32 var c; 33 if(tarr[top]=="+") c=a+b; 34 else if(tarr[top]=="-") c=b-a; 35 else if(tarr[top]=="*") c=a*b; 36 else if(tarr[top]=="/") c=b/a; 37 numarr.pop(); 38 numarr.pop(); 39 numarr.push(c); 40 tarr.pop(); 41 } 42 } 43 return numarr[0]; 44 } 45 $(document).ready(function(){ 46 $("body").css({"width":maxWidth}); 47 $("button").click(function(){ 48 if(clear==true){expr=""; clear=false;}//清空 49 var text = $(this).attr("value"); 50 if(token.test(text)||digit.test(text)) 51 {expr+=text;} 52 if(text==="AC"){expr="";} 53 if(text==="CE") {expr=expr.slice(0,-1);} 54 if(text==="="){ 55 expr=cal(expr); 56 clear=true; 57 } 58 $(".textbox").val(expr); 59 }); 60 });
注意：在此算法下如果连输两个符号，只有第一个符号有效，但不会报错，其他错误都会显示not a number