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

知识点：1。使用数学运算“，-，*，/”2。对输入内容的判断和对事件对象来源的判断效果：。

代码：复制代码代码如下：样式#计算{行高： 60px文本对齐：中心；背景# CCC font-size : 16px；字体粗细：粗体；} #计算tbody输入{宽度： 100%；高度： 60px背景技术： # 033;color : # ffffont : bold 16px/1em '微软雅黑；} #计算t车身TD {宽度：25%；背景# fff } # calculate _ OutPut { font-size : 20px；字母间距：2 px背景# fff高度： 40pxborder:无；文本对齐：右侧；宽度： 100%;}/style table width=' 300 ' border=' 0 '单元格间距=' 1 '单元格填充=' 0 ' id=' calculate ' ad tr TD colspan=' 4 ' align=' right ' input id=' calculate _ OutPut ' value=' 0 ' disabled=' disabled '/TD/tr/ad t body id=' calculate _ num ' tr TD label input type=' button ' name=' button ' id=' button '值=' 7 ' _ type=' num '//label/TD tdinput type=' button ' value=' 8 ' _ type=' num '/TD tdinput type=' button ' value=' 9 ' _ type=' num '/TD tdinput type=' button ' value='/' _ type=' op '/TD/tr tdinput type=' button ' value=' 4 ' _ type=' num '/TD tdinput type=' button ' value=' 5 ' _ type=num '/TD tdinput type=' button ' value=' 6 ' _ type=' num '/TD/_ type=' . //TD TD tdinput type=' button ' value=' ' _ type=' op '/TD/tr TD colspan=' 2 ' id=' debug ' input type=' button ' value=' back space ' _ type=' bs '/TD tdinput type=' button ' value=' C ' _ type=' cls '/TD tdinput type=' button ' value='=' _ type=' eval '/TD/tr/tbody/table script//计算对象var operatexp={ ' ' : '函数(num 1，num 2){ return num 1 num 2；}，'-':function(num1，num 2){ return num 1-num 2；}、“*”: function(num 1，num 2){ return num 1 * num 2；}，'/':function(num1，num2){return num2===0？0:编号1/编号2；} } //计算函数var operateNum=function(num1，num2，op){ if(！(num1num2))返回；//保证num1，num2都为数字num1=数字(num 1)；num2=数字(num 2)；//不存在操作符，返回num1if(！op)返回num1//匹配运算公式if(！opera exp[op])返回0;返回operateExp[op](num1，num 2)；} //显示面板var calculate _ OutPut=文档。getelementbyid(' calculate _ OutPut ')；//操作面板var calculate _ num=文档。getelementbyid(' calculate _ num ')；定义变量结果=0;//计算结果var isReset=false//是否重新设置定义变量操作；//操作符//设置显示屏的值函数setScreen(num){ calculate _ OutPut。值=num} //获取显示屏的值函数getScreen(){ return calculate _ OutPut。价值；} //添加点击事件计算_ num。onclick=function(e){ var ev=e | | window。事件；var目标=ev。目标| | ev。srcelelementif(目标。type==' button '){ var mark=target。GetAttribute(' _ type ')；//获取当前点击按钮的自定义的属性。

定义变量值=target.value//获取当前的值var num=Getsscreen()；//获取当前框的值如果(标记==='bs'){//退格键if(num==0)返回；var snum=Math.abs(num).toString()；if(snum。长度2)设置屏幕(0)；else setScreen(num.toString().切片(0,-1));} if(mark==='num'){//数字键if(num==='0'||isReset){//有操作符或显示屏为0设置屏幕(值);isReset=false返回；} setScreen(num.toString().concat(value))；}如果(标记===' . '){//小数点var hasPoint=num.toString().indexOf(' . ')-1;if(HasPoint){ if(IsReset){ Setscreen(' 0 ')值);isReset=false返回；}返回；} setScreen(num.toString().concat(value))；} if(mark==='/'/'/'){//正负号setScreen(-num)；} if(mark==='op'){//如果点击的是操作符则设计第一个操作数if(isReset)返回；isReset=trueif(！operation){ result=num；操作=值；返回；} result=operateNum(result，Num，operation)；setScreen(结果);操作=值；} if(mark==='cls'){//清零结果=0;setScreen(结果);isReset=false }如果(标记==='eval'){//计算if(！操作)返回；result=operateNum(result，Num，operation)；setScreen(结果);操作=NullsReset=false } } }/脚本视图代码详细分解：第一：分支计算部分没有使用转换语句，使用了名值对的形式。复制代码代码如下： //计算对象var operatexp={ ' ' : '函数(num 1，num 2){ return num 1 num 2；}，'-':function(num1，num 2){ return num 1-num 2；}、“*”: function(num 1，num 2){ return num 1 * num 2；}，'/':function(num1，num2){return num2===0？0:编号1/编号2；} } 第二：对象事件的属性的使用，获取点击对象的类型。利用事件冒泡，捕获事件，并对事件进行分类处理。复制代码代码如下： compute _ num。onclick=function(e){ var ev=e | | window。事件；var目标=ev。目标| | ev。srcelelementif(目标。type==' button '){ var mark=target。GetAttribute(' _ type ')；//获取当前点击按钮的自定义的属性定义变量值=target.value//获取当前的值var num=Getsscreen()；//获取当前框的值如果(标记==='bs'){//退格键if(num==0)返回；var snum=Math.abs(num).toString()；if(snum。长度2)设置屏幕(0)；else setScreen(num.toString().切片(0,-1));} if(mark==='num'){//数字键if(num==='0'||isReset){//有操作符或显示屏为0设置屏幕(值);isReset=false返回；} setScreen(num.toString().concat(value))；}如果(标记===' .'){//小数点var hasPoint=num.toString().indexOf('。')-1;if(HasPoint){ if(IsReset){ Setscreen(' 0 ')值);isReset=false返回；}返回；} setScreen(num.toString().concat(value))；} if(mark==='/'/'/'){//正负号setScreen(-num)；} if(mark==='op'){//如果点击的是操作符则设计第一个操作数if(isReset)返回；isReset=trueif(！operation){ result=num；操作=值；返回；} result=operateNum(result，Num，operation)；setScreen(结果);操作=值；} if(mark==='cls'){//清零结果=0;setScreen(结果);isReset=false }如果(标记==='eval'){//计算if(！操作)返回；result=operateNum(result，Num，operation)；setScreen(结果);操作=nullisReset=false } } }第三：全局变量的使用，利用全局变量对局部操作进度进行控制。(状态控制)复制代码代码如下： var结果=0;//计算结果var isReset=false//是否重新设置定义变量操作；//操作符第四：对页面操作进行分离，解耦合。复制代码代码如下： //设置显示屏的值函数setScreen(num){ calculate _ OutPut。值=num} //获取显示屏的值函数getScreen(){ return calculate _ OutPut。价值；} 第五：过滤操作数，完成计算。复制代码代码如下： //计算函数var operateNum=function(num1，num2，op){ if(！(num1num2))返回；//保证num1，num2都为数字num1=数字(num 1)；num2=数字(num 2)；//不存在操作符，返回num1if(！op)返回num1//匹配运算公式if(！opera exp[op])返回0;返回operateExp[op](num1，num 2)；}

PS:这里推荐两个本站的在线计算器，都是js实现的，功能强大。相信对你深入理解JavaScript数学运算和网页设计会有帮助：

在线标准计算器：http://tools.jb51.net/jisuanqi/jsq.

在线科学计算器：http://tools.jb51.net/jisuanqi/jsqkexue.