本文实例讲述了JS实现可针对算术表达式求值的计算器功能。分享给大家供大家参考，具体如下：
创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为平房企业提供专业的成都网站制作、做网站，平房网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
HTML部分：
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( ch2, ch3) //比较运算符ch2和ch3优先级
{
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;ch2!=array1[i];i++);
for(var j=0;ch3!=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"<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;
}
运行效果如下图所示：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
PS：这里再为大家推荐几款计算工具供大家进一步参考借鉴：
在线一元函数（方程）求解计算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq
更多关于JavaScript相关内容还可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。