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


Posted in Javascript onMay 30, 2013

知识点:

1、数学运算“+,-,*,/”的使用

2、输入内容的判断,对于事件对象的来源的判断
效果:
javascript-简单的计算器实现步骤分解(附图) 
代码:

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

}
Javascript 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Vue实现选择城市功能
May 27 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Vue使用轮询定时发送请求代码
Aug 10 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
js控制的遮罩层实例介绍
May 29 #Javascript
js控制web打印(局部打印)方法整理
May 29 #Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
You might like
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
给客户的道歉信
2014/01/13 职场文书
出国英文推荐信
2014/05/10 职场文书
学生打架检讨书
2014/10/20 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
补充协议书
2015/01/28 职场文书
刑事撤诉申请书
2015/05/18 职场文书
升学宴家长致辞
2015/07/27 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
OpenCV实现反阈值二值化
2021/11/17 Java/Android
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB