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

#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

//計算物件
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 isReset=false;//是否重新設定
var operation;//操作符