JS實現可針對算術表達式求值的計算器功能示例

2019-11-19 13:03:15

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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;}

運行效果如下圖所示：