欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-28 11:06:04
本文实例讲述了js实现可针对算术表达式求值的计算器功能。分享给大家供大家参考,具体如下: html部分:

本文实例讲述了js实现可针对算术表达式求值的计算器功能。分享给大家供大家参考,具体如下:

html部分:

<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部分:

/* 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;
  }

js部分:

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;
}

运行效果如下图所示:

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

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

感兴趣的朋友可以使用在线html/css/javascript前端代码调试运行工具http://tools.jb51.net/code/webcoderun测试上述代码运行效果。

ps:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:

科学计算器在线使用_高级计算器在线计算:

在线计算器_标准计算器:

更多关于javascript相关内容还可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript操作dom技巧总结》及《javascript字符与字符串操作技巧总结

希望本文所述对大家javascript程序设计有所帮助。