search

Home  >  Article  >  Web Front-end  >  javascript-decomposition of simple calculator implementation steps

javascript-decomposition of simple calculator implementation steps

高洛峰
高洛峰Original
2017-02-04 14:08:43956browse

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

javascript-decomposition of simple calculator implementation steps

Code: 

<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 &#39;Microsoft yahei&#39;; 
} 
#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=&#39;num&#39; /> 
</label></td> 
<td><input type="button" value="8" _type=&#39;num&#39; /></td> 
<td><input type="button" value="9" _type=&#39;num&#39; /></td> 
<td><input type="button" value="/" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="4" _type=&#39;num&#39; /></td> 
<td><input type="button" value="5" _type=&#39;num&#39; /></td> 
<td><input type="button" value="6" _type=&#39;num&#39; /></td> 
<td><input type="button" value="*" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="1" _type=&#39;num&#39; /></td> 
<td><input type="button" value="2" _type=&#39;num&#39; /></td> 
<td><input type="button" value="3" _type=&#39;num&#39; /></td> 
<td><input type="button" value="-" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="0" _type=&#39;num&#39; /></td> 
<td><input type="button" value="+/-" _type=&#39;+/-&#39; /></td> 
<td><input type="button" value="." _type=&#39;.&#39; /></td> 
<td><input type="button" value="+" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td colspan="2" id="debug"><input type="button" value="backspace" _type=&#39;bs&#39; /></td> 
<td><input type="button" value="C" _type=&#39;cls&#39; /></td> 
<td><input type="button" value="=" _type=&#39;eval&#39; /></td> 
</tr> 
</tbody> 
</table> 
<script> 
//计算对象 
var operateExp={ 
&#39;+&#39;:function(num1,num2){return num1+num2;}, 
&#39;-&#39;:function(num1,num2){return num1-num2;}, 
&#39;*&#39;:function(num1,num2){return num1*num2;}, 
&#39;/&#39;: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===&#39;bs&#39;){//退格键 
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===&#39;num&#39;){//数字键 
if(num===&#39;0&#39;||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

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

//计算对象 
var operateExp={ 
&#39;+&#39;:function(num1,num2){return num1+num2;}, 
&#39;-&#39;:function(num1,num2){return num1-num2;}, 
&#39;*&#39;:function(num1,num2){return num1*num2;}, 
&#39;/&#39;: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. 

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===&#39;bs&#39;){//退格键 
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===&#39;num&#39;){//数字键 
if(num===&#39;0&#39;||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; 
} 
} 
}

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

var result=0;//计算结果 
var isReset=false;//是否重新设置 
var operation;//操作符

Fourth: Separate and decouple page operations. 

//设置显示屏的值 
function setScreen(num){ 
calculate_outPut.value=num; 
} 
//获取显示屏的值 
function getScreen(){ 
return calculate_outPut.value; 
}

Fifth: Filter the operands and complete the calculation. 

//计算函数 
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); 
}

For more javascript-simple calculator implementation steps decomposition related articles, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Simple js code to implement calculator operationNext article：Simple js code to implement calculator operation

Related articles

See more