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

知識點：
　　1、數學運算「 ，-，*，/」的使用
　　2、輸入內容的判斷，對於事件物件的來源的判斷
效果：
 
代碼：

複製代碼 代碼如下:

#calculate {
行高：60px;
文字對齊：居中；
背景：#ccc；
字體大小：16px；
背景：#ccc；
字體大小：16px；
背景：#ccc；
字體大小：16px；字體粗細：粗體；
}
#計算tbody輸入{
寬度：100%;
高度：60px;
背景：#033;
顏色：#fff；
字體：粗體16px/1em '微軟雅黑'；
}
#計算tbody td{
寬度：25%;
背景：#fff;
}
#calculate_outPut{
字體大小：20px;
字母間距：2px；
背景：#fff;
高度：40px;
邊框：無；
文字對齊：右；右； 🎜>寬度：100%;
}
風格>





標題>






























td>


表>

//計算物件
var operaExp={
' ':function (num1,num2){return num1 num2;},
'-':function(num1,num2){return num1- num2;},
'*':function(num1,num2){返回num1* num2;},
'/':function(num1,num2){返回num2===0?0:num1/ num2;}
}
//計算函數
var operaNum=function (num1,num2,op){
if(!(num1&&num2))return;
//保證num1,num2都為數字
num1=Number(num1);
num2=數字(num2 );
//不操作存在符,返回num1;
if(!op)return num1;
//匹配侵犯公式
if(!operateExp[op])return 0;
返回操作Exp[op](num1,num2);
}
//顯示面板
varcalculate_outPut=document.getElementById("calculate_outPut");
//操作面板
varcalculate_num= document.getElementById("calculate_num");
var result=0;//計算結果
var isReset=false;//是否重新設定
var operation;//操作符
//設定顯示器的值
function setScreen (num){
calculate_outPut.value=num;
}
//取得顯示器的值
function getScreen(){
returnvalue ;
}
//新增點擊事件
calculate_num.onclick=function(e){
var ev = e ||視窗.事件;
var target = ev.target || ev. .srcElement; if(target.type=="button"){ var mark=target.getAttribute("_type");//取得目前點擊按鈕的自訂屬性。
var value=target.value;//取得目前的值
var num=getScreen();//取得目前框的值
if(mark==='bs'){//退格鍵
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.lengthsetScreen(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,numnum ,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;
}
}
}

View Code

詳細分解：
第一：分支計算部分沒有使用switch 語句，使用了名值對的形式。

複製程式碼 程式碼如下:

//計算物件
var operate 🎜>' ':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.lengthsetScreen(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,numnum ,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;
}

5 番目: オペランドをフィルタリングして計算を完了します。

コードをコピー コードは次のとおりです:

//関数を計算
var OperatorNum =function(num1,num2,op){
if(!(num1&num2))return;
//num1 と num2 が両方とも数値であることを保証します
num1=Number(num1); Number(num2) ;
//演算子が存在しません、return num1;
if(!op)return num1;
if(!operateExp[op])return 0;
return operand[op](num1,num2)
}