JS实现可针对算术表达式求值的计算器功能示例

<div>
 <div id="in">
  <input name="in" type="text"  class="clsin" id="input" value="" readonly="readonly" />
  <input type="button" name="=" value="=" onclick="exp_result()"/>
 </div>
 <div id="num">
 <input type="button" name="seven" value="7" onclick="test(this);"/>
 <input type="button" name="8" value="8" onclick="test(this);"/>
 <input type="button" name="9" value="9" onclick="test(this)"/>
 <input type="button" name="/" value="/" onclick="test(this)"/>
 <!--span id="showvalue"></span-->
 <br />
 <input type="button" name="4" value="4" onclick="test(this)"/>
 <input type="button" name="5" value="5" onclick="test(this)" />
 <input type="button" name="6" value="6" onclick="test(this)"/>
  <input type="button" name="*" value="*" onclick="test(this)"/>
 <br />
 <input type="button" name="1" value="1" onclick="test(this);"/>
 <input type="button" name="2" value="2" onclick="test(this);"/>
 <input type="button" name="3" value="3" onclick="test(this);"/>
  <input type="button" name="-" value="-" onclick="test(this);"/>
 <br />
 <input type="button" name="0" value="0"   onclick="test(this);"/>
 <input type="button" name="+/-" value="("  onclick="test(this);"/>
 <input type="button" name="." value=")"   onclick="test(this);"/>
 <input type="button" name="+" value="+"   onclick="test(this);"/>
 </div>
</div>

/* css document */
body
{
 /*  padding-right:40%;
   padding-left:40%;*/
   text-align:center;
}
div{
  background-color:orange;
  height:300px;
  width:300px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:auto;
  margin-top:50px;
  border-style: groove;
  border-color: green;
/*  margin-top:auto;*/
}
#in{
    position:relative;
    margin-left:20px;
    margin-top:10px;
    height:27px;
    width:260px;
    background:red;
    top:40px
  }
.clsin
  {
    height:27px;
    width:200px;
    background-color:#fff;
  }
#num{
    position:relative;
    margin-left:20px;
    margin-top:45px;
    height:150px;
    width:250px;
    background-color:green;
    text-align:left;
  }
#num input
  {
    margin-right:10px;
    margin-top:10px;
    width:35px;
  }

str_exp=""; //存放表达式
function test(obj)   //数字 运算符 btn  click
{
    str_exp+=obj.value;
    document.getelementbyid("input").value=str_exp;
}
function compare( ch1, ch2)         //比较运算符ch1和ch2优先级
{
  array1=new array('+','-','*','/','(',')','@');
  array20=new array('>','>','<','<','<','>', '>');
  array21=new array( '>','>','<','<','<','>','>');
  array22=new array( '>','>','>','>','<','>','>');
  array23=new array('>','>','>','>','<','>','>');
  array24=new array('<','<','<','<','<','=',' ');
  array25=new array('>','>','>','>',' ','>','>');
  array26=new array( '<','<','<','<','<',' ','=');
  array2=new array(array20,array21,array22,array23,array24,array25,array26);
//  b[7][7]={'>','>','<','<','<','>','>',  // +
//        '>','>','<','<','<','>','>',   // -
//        '>','>','>','>','<','>','>',   // *
//        '>','>','>','>','<','>','>',   // /
//        '<','<','<','<','<','=',' ',   // (
//         '>','>','>','>',' ','>','>',  // )
//         '<','<','<','<','<',' ','=' }; // @
  for(var i=0;ch1!=array1[i];i++);
  for(var j=0;ch2!=array1[j];j++);
  return array2[i][j];
}
function operate(a,preop,b)  //计算a？b的值
{
 // var num1=parseint(a,10);
 // var num2=parseint(b,10);
  var num1=parsefloat(a);
  var num2=parsefloat(b);
//  alert("a:"+num1+preop+"b:"+num2);
  switch(preop)
  {
  case'+':return(num1+num2);break;
  case'-':return(num1-num2);break;
  case'*':return(num1*num2);break;
  case'/':return(num1/num2);break;
//  default: cout<<"erro"<<endl;return 0;
  }
}
function isnum( ch)                //判断读取ch是否为操作数
{
  if(ch=='+'||ch=='-'||ch=='*'||ch=='/'||ch=='('||ch==')'||ch=='@')
    return 0;
  else
    return 1;
}
function extend(str)    //将开始一定情况下‘-'转换为'（0-1）*'，从而支持负数
{
   var str1=new array();
   if(str.charat(0)=='-')
   {
     str1+="(0-1)*";
   }
   else
   {
    str1+=str.charat(0);
   }
   for(var i=1;i<str.length;i++)
   {
     if(str.charat(i)=='-'&&str.charat(i-1)=='(')
     {
      str1+="(0-1)*";
     }
     else
     str1+=str.charat(i);
   }
   return str1;
}
function divided(str)  //分离表达式中操作数与操作符存放到返回值中
{
 var str2=extend(str);
// alert(str2);
 var str_temp=new array();
 var j=0;
 var exptemp;
 var exppre;
 for(var i=0;i<str2.length;i++)
 {
  // alert(str2.charat(i));
   exptemp="";
   exptemp=str2.charat(i);
   if(i==0)
   str_temp[0]=exptemp;
   if(i>0)
   {
   exppre=str2.charat(i-1); ///////////////////////!!
   if(isnum(exptemp)&&isnum(exppre))  //判断前后连续取到的是否都是数字字符，是则拼接
   {
    str_temp[j-1]+=exptemp;
    j--;
   }
    else
    {
     str_temp[j]=exptemp;
    }
   }
   j++;
 }
 return str_temp;
}
function exp_result()
{
  str_exp=str_exp+'@';
  str=divided(str_exp);
  numarray=new array();  //存放操作数
  symbolarray =new array();//存放操作符
  symbolarray.push('@');
 //  numarray.push('@');
// alert(str.length);
  for(var i=0;str[i]!='@'||symbolarray[symbolarray.length-1]!='@';i++)
  {
//    alert(str[i]);
//    alert(symbolarray[symbolarray.length-1]);
    if(isnum(str[i]))
    {
 //     alert("num push:"+str[i]);
     numarray.push(str[i]);
    }
    else
    {
 //    alert("symbol:"+str[i]);
    preop=symbolarray[symbolarray.length-1];  //取栈顶元素
    switch(compare(preop,str[i]))
    {
      case'<':symbolarray.push(str[i]);break;
      case'=':symbolarray.pop();break;
      case'>':b=numarray.pop();a=numarray.pop();preop=symbolarray.pop(); //取两操作数与之前操作符运算
          numarray.push(operate(a,preop,b)); //计算结果入栈
         // str.push(str[i]); //当前操作符入栈
          i--;   //继续与之前的操作符比较
          break;
    }
    }
  }
  if(isnan(numarray[0]))
  {
   alert("算术表达式输入有误!!");
  }
  else
  alert("结果为："+numarray[0]);
  str_exp="";
  document.getelementbyid("input").value=str_exp;
}