溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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( 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"<<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.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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
