javascript-简单的计算器实现
知识点：
1、数学运算“+，-，*，/”的使用
2、输入内容的判断，对于事件对象的来源的判断
效果：
代码：
<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 '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%; } </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='num' /> </label></td> <td><input type="button" value="8" _type='num' /></td> <td><input type="button" value="9" _type='num' /></td> <td><input type="button" value="/" _type='op' /></td> </tr> <tr> <td><input type="button" value="4" _type='num' /></td> <td><input type="button" value="5" _type='num' /></td> <td><input type="button" value="6" _type='num' /></td> <td><input type="button" value="*" _type='op' /></td> </tr> <tr> <td><input type="button" value="1" _type='num' /></td> <td><input type="button" value="2" _type='num' /></td> <td><input type="button" value="3" _type='num' /></td> <td><input type="button" value="-" _type='op' /></td> </tr> <tr> <td><input type="button" value="0" _type='num' /></td> <td><input type="button" value="+/-" _type='+/-' /></td> <td><input type="button" value="." _type='.' /></td> <td><input type="button" value="+" _type='op' /></td> </tr> <tr> <td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td> <td><input type="button" value="C" _type='cls' /></td> <td><input type="button" value="=" _type='eval' /></td> </tr> </tbody> </table> <script> //计算对象 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;//获取当前的值 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; } } } </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.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); }
优质内容筛选与推荐>>
1、c3p0参数解释
2、【死磕 Tomcat】—启动分析(四) webapp
3、获取网页的值
4、Java 三种循环的流程图画法总结(for,while,do-while循环)
5、Ubuntu_使用shell