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控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JS交换变量的方法
Jan 21 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
JS继承最简单的理解方式
Mar 31 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简单获取文件扩展名的方法
2015/03/24 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python制作词云的方法
2018/01/03 Python
python模拟事件触发机制详解
2018/01/19 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
CSMA/CD介质访问控制协议
2015/11/17 面试题
中职生自荐信
2013/10/13 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
投资意向书范本
2014/04/01 职场文书
租房协议书范文
2014/08/20 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
张思德观后感
2015/06/09 职场文书
小学校长开学致辞
2015/07/29 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js