JavaScript实现一个简易的计算器
2016-07-18 10:46
513 查看
写在最前的一些‘废话’
大概从六月十号左右开始就一直在为期末考试(大部分)还有保研忙,本来计划的一个周至少有一天可以安心写代码,但发现计划赶不上变化,刚开始的第一周还可以有时间,但往后发现自己整个思维一直处于期末考的状态中,根本不适合写代码。好吧,我承认我对coding的各种要求都挺“无语”。
期末考结束之后,又去苏大参加了几天夏令营,这么忙前忙后的持续了有一个月之久。从苏州回来,休息了两天,就到了17号。
自己期末复习的时候就一直想要写一个计算器,闲暇的时候也在想具体怎么实现,觉得应该不难,但就是想写。昨天终于可以开始动工,刚开始还以为实现出来需要一个周左右至少两天的时间,想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧,昨天用了大概六个小时完成了从设计到具体实现。
有大概一个月没怎么写代码了,整个大脑都不适应,反应也慢,一些基本的东西都有点模糊不清了。可能是原来就没有太理解,再加上没有其余练习,导致效率有些低。
正文
实现代码:http://codepen.io/crystalYY/pen/jAkNVz
正常显示界面
错误提示界面
- 实现思路
使用
借鉴了其他人已经实现了的结构,发现他们有一些人没有直接在
使用
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预,最终的计算从
3.通过事件代理绑定事件
因为每个button都需要有一个点击事件,如果一个一个去绑定,会导致代码十分的不简洁,而且效率也非常低。这时就可以考虑使用事件代理,由于事件冒泡的原理,我们可以把点击事件绑定在table上,然后通过判断事件发生的具体对象来做出不同的反应,调用不同的函数。
4.其他效果
可以根据自己的设计思路,添加其他的效果。我主要是添加了一个错误提示的动画:如果eval函数抛出异常,则从上面缓慢滑下一个图片,并且通过
5.注意细节
在设置enter键按下获得结果的时候,
获取元素样式时需要写一个兼容函数,因为
大概从六月十号左右开始就一直在为期末考试(大部分)还有保研忙,本来计划的一个周至少有一天可以安心写代码,但发现计划赶不上变化,刚开始的第一周还可以有时间,但往后发现自己整个思维一直处于期末考的状态中,根本不适合写代码。好吧,我承认我对coding的各种要求都挺“无语”。
期末考结束之后,又去苏大参加了几天夏令营,这么忙前忙后的持续了有一个月之久。从苏州回来,休息了两天,就到了17号。
自己期末复习的时候就一直想要写一个计算器,闲暇的时候也在想具体怎么实现,觉得应该不难,但就是想写。昨天终于可以开始动工,刚开始还以为实现出来需要一个周左右至少两天的时间,想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧,昨天用了大概六个小时完成了从设计到具体实现。
有大概一个月没怎么写代码了,整个大脑都不适应,反应也慢,一些基本的东西都有点模糊不清了。可能是原来就没有太理解,再加上没有其余练习,导致效率有些低。
正文
实现代码:http://codepen.io/crystalYY/pen/jAkNVz
正常显示界面
错误提示界面
- 实现思路
使用
table画出整个界面。
借鉴了其他人已经实现了的结构,发现他们有一些人没有直接在
td里写1,2,3或者退格什么的,而是又嵌套了一个
button,我其实到现在也没有太理解为什么要这样,只是在排版的时候感觉到有些作用:因为
margin对
td不起作用,只能设置
padding。
使用
eval函数计算最终结果,并捕获异常
function getResult(){ function evalResult(){ var result=eval(oinput.value); return result; } //捕获异常 try{ var x=evalResult(); return x; } catch (e){ oinput.className='showError'; var errorHint=document.getElementById('errorHint'); move(errorHint,'top',0); setTimeout(function(){ oinput.className=''; move(errorHint,'top',-282); },2000); return oinput.value; } }
eval函数第一次使用,w3c上对它的定义如下
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预,最终的计算从
input输入框中获取
value值,然后把这个value值作为参数传递给
eval,并使用
try catch(exception)来捕获并处理异常。
3.通过事件代理绑定事件
因为每个button都需要有一个点击事件,如果一个一个去绑定,会导致代码十分的不简洁,而且效率也非常低。这时就可以考虑使用事件代理,由于事件冒泡的原理,我们可以把点击事件绑定在table上,然后通过判断事件发生的具体对象来做出不同的反应,调用不同的函数。
4.其他效果
可以根据自己的设计思路,添加其他的效果。我主要是添加了一个错误提示的动画:如果eval函数抛出异常,则从上面缓慢滑下一个图片,并且通过
setTimeout来设置了停留的时间。
5.注意细节
在设置enter键按下获得结果的时候,
keydown事件对象应该为整个table,并且应该阻止enter键的默认行为
获取元素样式时需要写一个兼容函数,因为
obj.style.attr只能获取行间样式,要像获取外部样式需要用
getComputedStyle(obj,false)[attr]或兼容IE的
obj.currentStyle[attr]。
相关文章推荐
- JSP自定义标签由浅到深详细讲解(全)
- 全面介绍javascript实用技巧及单竖杠
- Javascript面试题解析
- JS 随机数
- js验证真实姓名与身份证号,手机号的简单实例
- iScroll.js 用法参考
- JavaScript图表库 ECharts
- C# Json转对象 序列化 反序列化
- jstree使用【一】初次使用
- HTML文档插入JS代码的几种方法
- HTML文档插入JS代码的几种方法
- ExtJS4-布局系统详解
- Guzzle Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, malformed JSON
- JS判断输入的数值不能为小数
- Javascript之Dom学习
- 15位和18位身份证JS校验的简单实例
- js对字符串加密,解密
- ExtJS4-Ext.Direct
- JSP常用跳转方式
- js里对日期格式化。