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=' show value '/span-br/input type=' button ' name=' 4 ' value=' 4 ' onClick=' test(this)'/input type=' button ' name=' 5 ' onClick=' test(this)'/input type=' button ' name=' test(this)'/input type=' button ' name=' * ' value=' * ' onClick=' test(this)'/br/input type=' button ' name/input type=' button ' name=' button '/input type=' button ' name=' 3 ' value=' 3 ' OnClick=' test(this)；/input type=' button ' name='-' value='-' onClick=' test(this)；/br /输入类型='按钮'名称='0 '值=' 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/divCSS部分：

/* CSS文档*/正文{/*填充-右：40%；左填充：40%;*/text-居中对齐：} div {底色：橙色；高度：300 px宽度宽度：300像素左边距左：auto右边距：汽车；边距-底部：自动；页边距-顶部：50像素；边框样式：凹槽；边框-颜色：绿色；/*边距-top : auto；*/} #在{位置：相对左边距left :20 pxmargin-top :10 px；高度：27 px宽度宽度：260像素背景：红色；top:40px } .clsin { height:27px宽度宽度：200像素背景色： # FFF；} # num { position:relative左边距left :20 pxmargin-top :45 px；高度：150 px宽度宽度：250像素背景-颜色：绿色；向左文本对齐：} # num input { margin-right :10 px；页边距-top :10 px；宽度：35 px}js部分：

str _ exp=//存放表达式功能测试(obj) //数字运算符按钮单击{ str _ exp=obj . value document . getelementbyid(' input ').value=str _ exp}函数比较(ch1，ch2) //比较运算符ch1和ch2优先级{ array1=新数组(""、"-"、"*"、"/"、"("、")"、"@");array20=新数组(""、""、""、""、""、""、"");array21=新数组(""、""、""、""、""、""、"");array22=新数组(""、""、""、""、""、""、"");array23=新数组(""、""、""、""、""、""、"");array24=新数组(""、""、""、""、""、""、"="、"");array25=新数组(""、""、""、""、""、""、"");array26=新数组(""、""、""、""、""、""、""、"=");array2=新数组(阵列20、阵列21、阵列22、阵列23、阵列24、阵列25、阵列26)；//b[7][7]={“”、“”、“”、“”、“”、“/”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“=”、“”、“///(/“”、“”、“”、“”、“”、“”、“”、“”、“”、“、“”、“、“”、“、“”、“”、“、“”、“、“”、“、“”、“、“”、“”、“、“”、“、“、“”ch1！=数组1[I]；;for(var j=0；ch2！=数组1[j]；j)；返回数组2[I][j]；}功能操作(a，preop，b) //计算a？b的值{ //var num1=parseInt(a，10)；//var num2=parseInt(b，10)；var num 1=parseFloat(a)；var num 2=ParseFloat(b)；//alert(' a : ' num 1 preop ' b : ' num 2)；开关(preop){ case ' ' : return(num 1 num 2)；打破；case '-' : return(num 1-num 2)；打破；大小写*”:返回(num 1 * num 2)；打破；case '/' : return(num 1/num 2)；打破；//默认值： cout ' erro ' endl返回0;} }函数isNum(ch) //判断读取荣誉勋爵是否为操作数{ if(ch==' ' | | ch=='-' | | ch==' * | | ch=='/' | | ch=='='='='(' | | ch==')' | | ch==' @ ')返回0;否则返回1;}函数扩展(字符串)//将开始一定情况下'-'转换为'(0-1)*',从而支持负数{ var str 1=新数组()；if(str。charat(0)='-'){ str 1='(0-1)* '；} else { str 1=str。charat(0)；} for(var I=1；is tr . LengTii){ if(str。charat(I)='-'字符串。charat(I-1)='('){ str 1='(0-1)* '；} else str 1=str。charat(一)；}返回str1}功能划分(字符串)//分离表达式中操作数与操作符存放到返回值中{ var str 2=extend(str)；//alert(str 2)；var str _ temp=新数组();var j=0；var expTempvar exp pref(var I=0；是T2。长度；I){//alert(str 2。charat(I))；expTemp=expTemp=str 2。charat(一)；if(I==0)str _ temp[0]=EXptemp；if(i0){ expPre=str 2。charat(I-1)；///////////////////////!if(iSNum(expTemp)iSNum(expPre))//判断前后连续取到的是否都是数字字符，是则拼接{ str _ temp[j-1]=EXptemp；j-；} else { str _ temp[j]=Exptemp；} } j；}返回str _ temp}函数exp _ result(){ str _ exp=str _ exp ' @ '；str=divided(str _ exp)；numArray=新数组();//存放操作数符号数组=新数组();//存放操作符符号数组。push(' @ ')；//NuMarray。push(' @ ')；//alert(str。长度)；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])；努马雷。push(str[I])；} else {//alert(' symbol : ' str[I])；preop=Symbolarray[Symbolarray。长度-1]；//取栈顶元素开关(比较(preop，str[I]){ case ' ' : symbolarray。push(str[I])；打破；case '=' : symbolarray。pop()；打破；案例' ' : b=NuMarray。pop()；a=NuMarray。pop()；preop=symbolarray。pop()；//取两操作数与之前操作符运算numArray.push(operate(a，preop，b))；//计算结果入栈//str。push(str[I])；//当前操作符入栈我-；//继续与之前的操作符比较打破；} } } 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来测试上述代码的运行效果。

附言：在这里，我们推荐几种计算工具，供您进一步参考：

在线一元函数(方程)解计算工具：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字符与字符串操作技巧总结》、0103010

希望本文对JavaScript编程有所帮助。