javascript-簡單的計算機實現步驟分解(附圖)

知識點：
　　1、數學運算“+，-，*，/”的使用
　　2、輸入內容的判斷，對於事件對象的來源的判斷
效果：

代碼： 複製代碼 代碼如下:<style>
#calculate {
line-height: 60px;
text-align: center;
background: #ccc;
font-size: 16px;
font-weight: bold;
}
#calculate tbody input{
width: 100%;
height: 60px;
background:#033;
color: #fff;
font: bold 16px/1em 'Microsoft yahei';
}
#calculate tbody td{
width: 25%;
background: #fff;
}
#calculate_outPut{
font-size: 20px;
letter-spacing:2px;
background:#fff;
height: 40px;
border: none;
text-align: right;
width: 100%;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
<thead >
<tr>
<td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
</tr>
</thead>
<tbody id="calculate_num">
<tr>
<td><label>
<input type="button" name="button" id="button" value="7" _type='num' />
</label></td>
<td><input type="button" value="8" _type='num' /></td>
<td><input type="button" value="9" _type='num' /></td>
<td><input type="button" value="/" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="4" _type='num' /></td>
<td><input type="button" value="5" _type='num' /></td>
<td><input type="button" value="6" _type='num' /></td>
<td><input type="button" value="*" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="1" _type='num' /></td>
<td><input type="button" value="2" _type='num' /></td>
<td><input type="button" value="3" _type='num' /></td>
<td><input type="button" value="-" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="0" _type='num' /></td>
<td><input type="button" value="+/-" _type='+/-' /></td>
<td><input type="button" value="." _type='.' /></td>
<td><input type="button" value="+" _type='op' /></td>
</tr>
<tr>
<td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
<td><input type="button" value="C" _type='cls' /></td>
<td><input type="button" value="=" _type='eval' /></td>
</tr>
</tbody>
</table>
<script>
//計算對象
var operateExp={
'+':function(num1,num2){return num1+num2;},
'-':function(num1,num2){return num1-num2;},
'*':function(num1,num2){return num1*num2;},
'/':function(num1,num2){return num2===0?0:num1/num2;}
}
//計算函數
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保證num1,num2都為數字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配運算公式
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}
//顯示面板
var calculate_outPut=document.getElementById("calculate_outPut");
//操作面板
var calculate_num=document.getElementById("calculate_num");
var result=0;//計算結果
var isReset=false;//是否重新設定
var operation;//操作符
//設定顯示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//擷取顯示屏的值
function getScreen(){
return calculate_outPut.value;
}
//添加點擊事件
calculate_num.onclick=function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.type=="button"){
var mark=target.getAttribute("_type");//擷取當前點擊button的自訂的屬性。
var value=target.value;//擷取當前的值
var num=getScreen();//擷取當前框的值
if(mark==='bs'){//退格鍵
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.length<2)
setScreen(0);
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//數字鍵
if(num==='0'||isReset){//有操作符或顯示屏為0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小數點
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//加號或減號
setScreen(-num);
}
if(mark==="op"){//如果點擊的是操作符則設計第一個運算元
if(isReset)return;
isReset=true;
if(!operation){
result=+num;
operation=value;
return;
}
result=operateNum(result,num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//清零
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//計算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}
</script>
View Code

詳細分解：
第一：分支計算部分沒有使用switch 語句，使用了名值對的形式。 複製代碼 代碼如下://計算對象
var operateExp={
'+':function(num1,num2){return num1+num2;},
'-':function(num1,num2){return num1-num2;},
'*':function(num1,num2){return num1*num2;},
'/':function(num1,num2){return num2===0?0:num1/num2;}
}

第二：對象事件的屬性的使用，擷取點擊對象的類型。利用事件冒泡，捕獲事件，並對事件進行分類處理。 複製代碼 代碼如下:calculate_num.onclick=function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.type=="button"){
var mark=target.getAttribute("_type");//擷取當前點擊button的自訂的屬性。
var value=target.value;//擷取當前的值
var num=getScreen();//擷取當前框的值
if(mark==='bs'){//退格鍵
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.length<2)
setScreen(0);
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//數字鍵
if(num==='0'||isReset){//有操作符或顯示屏為0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小數點
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//加號或減號
setScreen(-num);
}
if(mark==="op"){//如果點擊的是操作符則設計第一個運算元
if(isReset)return;
isReset=true;
if(!operation){
result=+num;
operation=value;
return;
}
result=operateNum(result,num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//清零
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//計算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}

第三：全域變數的使用，利用全域變數對局部操作進度進行控制。（狀態控制）　 複製代碼 代碼如下:var result=0;//計算結果
var isReset=false;//是否重新設定
var operation;//操作符

第四：對頁面操作進行分離，解耦合。 複製代碼 代碼如下://設定顯示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//擷取顯示屏的值
function getScreen(){
return calculate_outPut.value;
}

第五：過濾運算元，完成計算。 複製代碼 代碼如下://計算函數
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保證num1,num2都為數字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配運算公式
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}