javascript-简单的计算器实现步骤分解

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

代码： 

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

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

立即学习“Java免费学习笔记（深入）”；

Ex驾校预约小程序

传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。 采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

下载

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.length<2) 
setScreen(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); 
}

更多javascript-简单的计算器实现步骤分解相关文章请关注PHP中文网！