任务：用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
[JS]做一个网页四则运算计算器
原文地址：https://www.cnblogs.com/cuphoria/p/9870622.html