JavaScript实现一个简易的计算器实例代码

自己期末复习的时候就一直想要写一个计算器，闲暇的时候也在想具体怎么实现，觉得应该不难，但就是想写。昨天终于可以开始动工，刚开始还以为实现出来需要一个周左右至少两天的时间，想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧，昨天用了大概六个小时完成了从设计到具体实现。

有大概一个月没怎么写代码了，整个大脑都不适应，反应也慢，一些基本的东西都有点模糊不清了。可能是原来就没有太理解，再加上没有其余练习，导致效率有些低。

正文

超文本标记语言代码：

div class='错误提示' id='错误提示' img src=' http :https://github。com/crystalYY/calculator/blob/master/img/错误。巴布亚新几内亚？raw=true/div表格单元格填充=' 0 ' trth colspan=' 5 '计算器/th/trtd col span=' 5 '输入类型=“文本”值='0 '名称=' showResult '/TD/trtrtdbutton 7/button/tdtdt button 8/button/TDT button 9/button/TDT button class=' setChange ' id=' back space '退格/button/TDT button class=' SetChange ' id=' ClearNum ' c/button/TD/TRT按钮4/button/TDT按钮5/button/TDT按钮6/button/TDT按钮/TDT按钮//button/TD/TRT按钮1/button/TDT按钮2/button/TDT按钮3/button/TDT按钮*/button/TDT按钮//button/TD/TRT按钮0/button/TDT按钮./button/TDT button %/button/TDTD col span=' 2 ' button class=' SetChange ' id=' GainResult ' enter/button/TD/tr/table script type=' text/JavaScript ' src=' index。js '/脚本CSS代码：

* { margin : 0pxpadding : 0px }。错误提示{位置：绝对值；left : 130 pxtop :-282 px；}.显示错误{border:1px纯红；}表格{ border: 2px固体# 996c33宽度： 550像素；padd : 10px margin : 150 px自动；背景： URL(https://github。com/crystalYY/calculator/blob/master/img/bg2。jpg？raw=trueg)左中不重复；边框半径： 10px}表格TD { text-align : center宽度： 100像素；高度： 40px左填充： 2px填充-底部： 2px}表格th { font-size : 18px字体系列： '楷体；color: # 8B0000}表格任务描述按钮{宽度： 98%；高： 98%;font-size : 16px字体系列： '微软雅黑；背景：无；color : # 8b 4726 outlines : none border :1 px固体# 000;边界半径： 5px光标：指针；}表格任务描述输入{宽度： 100%；边距： 10px 0；padding: 5pxborder:1px固体# 996c33盒子尺寸：边框盒子；文本对齐：右侧；font-size : 16px字体系列： '微软雅黑；}JS代码：

var oin put=文档。getelementsbytagname(' input ')[0]；//获取外部样式函数getStyle(obj，name){ if(obj。currentstyle){ return obj。current style[name]；} else { return getComputedStyle(obj，false)[name]；}}//渐变动画函数移动(obj，attr，tar){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var cur=parsent(getStyle(obj，attr))；var itar get=ParSeint(tar)；var speed=(itar get-cur)/6；速度=速度0?Math.ceil(速度):路径。地板(速度);物体。style[attr]=ParSeint(GetStyle(obj，attr))速度px '；if(speed==0){ clearInterval(obj。计时器)；}},30);}//事件绑定函数函数addEvent(obj，ev，fun){ if(obj。attachevent){ obj。attachevent(' on ' ev，fun)；}else{obj.addEventListener(ev，fun，false)；}}//阻止默认行为函数停止事件(ev){ var e=ev | | window。事件；if(e . prevent default){ e . prevent default()；} else { e . return value=false//ie } }//计算最终结果函数getResult(){ function evaluate result(){ var result=eval(oin put。值)；返回结果；}//捕获异常尝试{ var x=evaluate result()；返回x；抓住放。类名=“显示错误”；var错误提示=文档。getelementbyid('错误提示')；移动(errorHint，“top”，0)；setTimeout(函数(){ oin put。类名=' '；move(errorHint，' top '，-282)；},2000);返回投入。价值；}}//文本框获取焦点，错误提示消失//按下回车得到结果函数输入结果(ev){ var e=ev | |窗口。事件；if(e .键码==13){停止事件(ev)；//阻止进入键的默认行为var result=getResult()；oinput.value=结果；}}//绑定点击事件函数init(){ var otable=document。getelementsbytagname(' table ')[0]；addEvent(OTA表，‘keydown’，函数(ev){ EnTER result(ev)；});addEvent(可旋转，'点击'，函数(ev){停止事件(ev)；var e=ev | | window . event var itat=e . target | | e . src element；var obt ns=文档。getelementsbytagname(' button ')；if(itat。nodename。tolowercase()==' button '){ for(var I=0；iob tns . LengiI){ obt ns[I]。风格。边框颜色=' # 000 '；} itat。风格。边框颜色='白色'；if(itat.className！=' SetChange '){ if(oin put。value==' 0 '){ oin put。值=' '；投入。value=itat。innerhtml} else { oin put。value=itat。innerhtml} } else { if(itat。id==' back space '){ oin put。价值=投入。价值。tostring().切片(0,-1);} else if(itat。id==' clearNum '){ oin put。值=' 0 '；} else { var result=GetResult()；oinput.value=结果；}}}});} init()；正常显示界面

错误提示界面

效果实现：http://codepen。io/crystally/pen/JakNvz

实现思路

1.使用桌子画出整个界面。

借鉴了其他人已经实现了的结构，发现他们有一些人没有直接在任务描述里写1,2,3或者退格什么的，而是又嵌套了一个按钮，我其实到现在也没有太理解为什么要这样，只是在排版的时候感觉到有些作用：因为边缘对任务描述不起作用，只能设置填料。

2.使用评价评价函数计算最终结果，并捕获异常

函数getResult(){ function evaluate result(){ var result=eval(oin put。值)；返回结果；} //捕获异常尝试{ var x=evaluate result()；返回x；抓住放。类名=“显示错误”；var错误提示=文档。getelementbyid('错误提示')；移动(errorHint，“top”，0)；setTimeout(函数(){ oin put。类名=' '；move(errorHint，' top '，-282)；},2000);返回投入。价值；} }评估函数第一次使用，w3c上对它的定义如下

eval()函数可计算某个字符串，并执行其中的的Java脚本语言代码。

有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预，最终的计算从投入输入框中获取价值值，然后把这个价值值作为参数传递给eval，并使用尝试捕获（异常)来捕获并处理异常。

3.通过事件代理绑定事件

因为每个按钮都需要有一个点击事件，如果一个一个去绑定，会导致代码十分的不简洁，而且效率也非常低。这时就可以考虑使用事件代理，由于事件冒泡的原理，我们可以把点击事件绑定在桌子上，然后通过判断事件发生的具体对象来做出不同的反应，调用不同的函数。

4.其他效果

可以根据自己的设计思路添加其他效果。我主要加了一个错误提示动画：如果eval函数抛出异常，它会从上面慢慢滑下一张图片，通过setTimeout设置停留时间。

5.注意细节

当设置回车键按下得到结果时，keydown事件对象应该是整个表，应该防止回车键的默认行为。获取元素样式时，应该写一个兼容函数，因为obj.style.attr只能获取行间样式，要获取外部样式，应该使用与IE兼容的getComputedStyle (obj，false) [attr]或obj.currentStyle[attr]。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。