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的each里用return true或false代替break或continue
May 21 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
JavaScript设计模式之原型模式详情
Jun 21 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
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
简单介绍Python中的struct模块
2015/04/28 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python获取代理IP的实例分享
2018/05/07 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
C语言笔试题
2014/09/04 面试题
见习期自我鉴定
2014/01/31 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年电教工作总结
2014/12/19 职场文书