javascript-decomposition of simple calculator implementation steps (with pictures)_javascript skills

Knowledge points:
1. Use of mathematical operations ", -, *, /"
2. Judgment of input content, judgment of the source of event objects
Effect :

Code:

Copy code The code is as follows:

<script> <BR>//计算对象 <BR>var operateExp={ <BR>' ':function(num1,num2){return num1 num2;}, <BR>'-':function(num1,num2){return num1-num2;}, <BR>'*':function(num1,num2){return num1*num2;}, <BR>'/':function(num1,num2){return num2===0?0:num1/num2;} <BR>} <BR>//计算函数 <BR>var operateNum=function(num1,num2,op){ <BR>if(!(num1&&num2))return; <BR>//保证num1,num2都为数字 <BR>num1=Number(num1); <BR>num2=Number(num2); <BR>//不存在操作符,返回num1; <BR>if(!op)return num1; <BR>//匹配运算公式 <BR>if(!operateExp[op])return 0; <BR>return operateExp[op](num1,num2); <BR>} <BR>//显示面板 <BR>var calculate_outPut=document.getElementById("calculate_outPut"); <BR>//操作面板 <BR>var calculate_num=document.getElementById("calculate_num"); <BR>var result=0;//计算结果 <BR>var isReset=false;//是否重新设置 <BR>var operation;//操作符 <BR>//设置显示屏的值 <BR>function setScreen(num){ <BR>calculate_outPut.value=num; <BR>} <BR>//获取显示屏的值 <BR>function getScreen(){ <BR>return calculate_outPut.value; <BR>} <BR>//添加点击事件 <BR>calculate_num.onclick=function(e){ <BR>var ev = e || window.event; <BR>var target = ev.target || ev.srcElement; <BR>if(target.type=="button"){ <BR>var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。<BR>var value=target.value;//Get the current value<BR>var num=getScreen();//Get the value of the current box<BR>if(mark==='bs'){//Exit Square key<BR>if(num==0)return; <BR>var snum=Math.abs(num).toString(); <BR>if(snum.length<2) <BR>setScreen(0); <BR>else <BR>setScreen(num.toString().slice(0,-1)); <BR>} <BR>if(mark==='num'){//numeric key<BR>if (num==='0'||isReset){//There is an operator or the display is 0 <BR>setScreen(value); <BR>isReset=false; <BR>return; <BR>} <BR> setScreen(num.toString().concat(value)); <BR>} <BR>if(mark==="."){//Decimal point<BR>var hasPoint=num.toString().indexOf(" .")>-1; <BR>if(hasPoint){ <BR>if(isReset){ <BR>setScreen("0" value); <BR>isReset=false; <BR>return; <BR> } <BR>return; <BR>} <BR>setScreen(num.toString().concat(value)); <BR>} <BR>if(mark===" /-"){//Positive and negative No. <BR>setScreen(-num); <BR>} <BR>if(mark==="op"){//If the click is an operator, design the first operand <BR>if(isReset) return; <BR>isReset=true; <BR>if(!operation){ <BR>result= num; <BR>operation=value; <BR>return; <BR>} <BR>result=operateNum(result, num,operation); <BR>setScreen(result); <BR>operation=value; <BR>} <BR>if(mark==="cls"){//Clear<BR>result=0; <BR>setScreen(result); <BR>isReset=false; <BR>} <BR>if(mark==="eval"){//Calculate<BR>if(!operation)return; <BR>result= operateNum(result,num,operation); <BR>setScreen(result); <BR>operation=null; <BR>isReset=false; <BR>} <BR>} <BR>} <BR></script>> ;
View Code

Detailed breakdown:
First: The branch calculation part does not use switch statements, but uses the form of name-value pairs.

Copy code The code is as follows:

//Calculation object
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;}
}

Second: Use the properties of the object event to obtain the type of the clicked object. Use event bubbling to capture events and classify them.

Copy code The code is as follows:

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"); //Get the custom attributes of the currently clicked button.
var value=target.value;//Get the current value
var num=getScreen();//Get the value of the current box
if(mark==='bs'){//Exit Square key
if(num==0)return;
var snum=Math.abs(num).toString();
if(snum.lengthsetScreen(0);
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//numeric key
if (num==='0'||isReset){//There is an operator or the display is 0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//Decimal point
var hasPoint=num.toString().indexOf(" .")>-1;
if(hasPoint){
if(isReset){
setScreen("0" value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark===" /-"){//Positive and negative No.
setScreen(-num);
}
if(mark==="op"){//If the click is an operator, design the first operand
if(isReset) return;
isReset=true;
if(!operation){
result= num;
operation=value;
return;
}
result=operateNum(result, num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//Clear
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//Calculate
if(!operation)return;
result= operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}

Third: Use of global variables, use global variables to control the progress of local operations. (State control)

Copy code The code is as follows:

var result=0;//Calculation Result
var isReset=false;//Whether to reset
var operation;//Operator

Fourth: Separate and decouple page operations .

Copy code The code is as follows:

//Set the value of the display screen
function setScreen(num){
calculate_outPut.value=num;
}
//Get the value of the display screen
function getScreen (){
return calculate_outPut.value;
}

Fifth: Filter the operands and complete the calculation.

Copy code The code is as follows:

//Calculate function
var operateNum=function( num1,num2,op){
if(!(num1&&num2))return;
//Guarantee that num1 and num2 are both numbers
num1=Number(num1);
num2=Number(num2) ;
//No operator exists, return num1;
if(!op)return num1;
//Matching operation formula
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}