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: #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%; } //计算对象 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;//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.length setScreen(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; } } } 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.length setScreen(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); }