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 相关文章推荐
jquery实现metro效果示例代码
Sep 06 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
7个jQuery最佳实践
Jan 12 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
node.js实现登录注册页面
Apr 08 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
超清晰的document对象详解
2007/02/27 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python异常的检测和处理方法
2018/10/26 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
详解Python sys.argv使用方法
2019/05/10 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python 发送get请求接口详解
2020/11/17 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2014年大学生工作总结
2014/11/20 职场文书
工人先进事迹材料
2014/12/26 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Python读取和写入Excel数据
2022/04/20 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android