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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
form自动提交实例讲解
2017/07/10 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
js Math 对象的方法
2013/09/01 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
使用vue构建移动应用实战代码
2017/08/02 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
深入了解JS之作用域和闭包
2020/06/16 Javascript
DataFrame中的object转换成float的方法
2018/04/10 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python正则表达式学习小例子
2020/03/03 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
授权委托书范文
2014/07/31 职场文书
民政局个人整改措施
2014/09/24 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
小学校长开学致辞
2015/07/29 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
logback如何自定义日志存储
2021/08/30 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL