[JS]做一个网页四则运算计算器

Posted 2021-01-15 jm_epiphany

任务：用js写算法，实现一个网页四则运算计算器

效果：

成果链接：codepen@cuphoria

---

 

js实现思路：

1. 定义一个用来存储表达式的全局变量expr和一个是否清空的全局变量clear
2. 点击value为表达式组成部分的按钮，将value加入到表达式expr中
3. 若按钮是ac ，ce则完成相应功能
4. 若按钮是等号，调用表达式计算函数，并将结果返回到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