国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

運行效果如下圖所示:

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調試運行工具http://tools.VeVB.COm/code/WebCodeRun測試上述代碼運行效果。

PS:這里再為大家推薦幾款計算工具供大家進一步參考借鑒:

在線一元函數(方程)求解計算工具:
http://tools.VeVB.COm/jisuanqi/equ_jisuanqi

科學計算器在線使用_高級計算器在線計算:
http://tools.VeVB.COm/jisuanqi/jsqkexue

在線計算器_標準計算器:
http://tools.VeVB.COm/jisuanqi/jsq

更多關于JavaScript相關內容還可查看本站專題:《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》及《JavaScript字符與字符串操作技巧總結

希望本文所述對大家JavaScript程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 清河县| 临安市| 名山县| 苏尼特右旗| 玛纳斯县| 菏泽市| 永靖县| 罗江县| 文化| 娱乐| 兰州市| 招远市| 乌兰察布市| 渝中区| 巫山县| 合水县| 绥滨县| 连州市| 石林| 海门市| 噶尔县| 镇原县| 共和县| 龙泉市| 濮阳市| 绥棱县| 鱼台县| 望奎县| 津市市| 宜丰县| 东平县| 青河县| 莒南县| 大厂| 万源市| 荆门市| 澳门| 精河县| 安乡县| 徐州市| 军事|