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

任务：用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;

var token=/[/*-+]/g;
var digit=/[0-9]/;
var maxWidth=window.screen.width;
var maxHeight=window.screen.height;
function best(t)//优先级比较
{
    if(t=="%") return 0;
    if(t=="+"||t=="-") return 1;
    if(t=="/"||t=="*") return 2;
}
function cal(expr)
{
  var num=expr.split(token);//数值分割出字符串成立数组
  var t=expr.split("");//符号同
  t=t.filter(function(val) {return !digit.test(val);});
  var numarr=[],tarr=[];
  tarr.push("%");//定义一个栈顶符号，优先级最低
  var i=0,j=0;
  var top=tarr.length;
  numarr.push(parseInt(num[j],10));//第一个数值先入栈
    while(top!=1||i!=t.length)//当符号栈只剩下一个符号，所有符号都运算完毕时，退出循环
    {
        top=tarr.length-1;//每次更新栈顶长度下标
        if(best(t[i])>best(tarr[top])) {tarr.push(t[i]);numarr.push(parseInt(num[++j],10));++i;}//比较优先级高时
        else 
        {
            var a=numarr[numarr.length-1];//优先级小于等于时
            var b=numarr[numarr.length-2];
            var c;
            if(tarr[top]=="+") c=a+b;
            else if(tarr[top]=="-") c=b-a;
                else if(tarr[top]=="*") c=a*b;
                    else if(tarr[top]=="/") c=b/a;
            numarr.pop();
            numarr.pop();
            numarr.push(c);
            tarr.pop();
        }
    }
    return numarr[0];
}
$(document).ready(function(){      
  $("body").css({"width":maxWidth});
  $("button").click(function(){
    if(clear==true){expr=""; clear=false;}//清空
    var text = $(this).attr("value");
    if(token.test(text)||digit.test(text))
      {expr+=text;}
    if(text==="AC"){expr="";}
    if(text==="CE") {expr=expr.slice(0,-1);}
    if(text==="="){
      expr=cal(expr);
      clear=true;
    }
    $(".textbox").val(expr);
  });
});

注意：在此算法下如果连输两个符号，只有第一个符号有效，但不会报错，其他错误都会显示not a number