javascript-简单的计算器实现步骤分解(附图)_javascript技巧

知识点：
　　1、数学运算“+，-，*，/”的使用
　　2、输入内容的判断，对于事件对象的来源的判断
效果：
 
代码：

复制代码 代码如下:

<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;//获取当前的值 <BR>var num=getScreen();//获取当前框的值 <BR>if(mark==='bs'){//退格键 <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'){//数字键 <BR>if(num==='0'||isReset){//有操作符或显示屏为0 <BR>setScreen(value); <BR>isReset=false; <BR>return; <BR>} <BR>setScreen(num.toString().concat(value)); <BR>} <BR>if(mark==="."){//小数点 <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==="+/-"){//正负号 <BR>setScreen(-num); <BR>} <BR>if(mark==="op"){//如果点击的是操作符则设计第一个操作数 <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"){//清零 <BR>result=0; <BR>setScreen(result); <BR>isReset=false; <BR>} <BR>if(mark==="eval"){//计算 <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

详细分解：
第一：分支计算部分没有使用switch 语句，使用了名值对的形式。

复制代码 代码如下:

//计算对象
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;}
}

第二：对象事件的属性的使用，获取点击对象的类型。利用事件冒泡，捕获事件，并对事件进行分类处理。

复制代码 代码如下:

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,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;
}
}
}

第三：全局变量的使用，利用全局变量对局部操作进度进行控制。（状态控制）　

复制代码 代码如下:

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

第四：对页面操作进行分离，解耦合。

复制代码 代码如下:

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

第五：过滤操作数，完成计算。

复制代码 代码如下:

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