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

前端之家收集整理的这篇文章主要介绍了JavaScript实现一个简易的计算器实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

正文

HTML代码:

789456+-123*/0.%

代码:

Box-sizing: border-Box; text-align: right; font-size: 16px; font-family: 'Microsoft yahei'; }

代码:

0?Math.ceil(speed):Math.floor(speed); obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px'; if(speed==0){ clearInterval(obj.timer); } },30); } //事件绑定函数 function addEvent(obj,ev,fun){ if(obj.attachEvent){ obj.attachEvent('on'+ev,fun); }else{ obj.addEventListener(ev,fun,false); } } //阻止默认行为 function stopEvent(ev){ var e=ev||window.event; if(e.preventDefault){ e.preventDefault(); } else{ e.returnValue=false;//ie } } //计算最终结果 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,-282); },2000); return oinput.value; } } //文本框获取焦点,错误提示消失 //按下回车得到结果 function enterResult(ev){ var e=ev||window.event; if(e.keyCode==13){ stopEvent(ev);//阻止enter键的默认行为 var result=getResult(); oinput.value=result; } } //绑定点击事件 function init(){ var otable=document.getElementsByTagName('table')[0]; addEvent(otable,'keydown',function(ev){ enterResult(ev); }); addEvent(otable,'click',function(ev){ stopEvent(ev); var e=ev||window.event; var itat=e.target||e.srcElement; var obtns=document.getElementsByTagName('button'); if(itat.nodeName.toLowerCase()=='button'){ for(var i=0;i

正常显示界面

错误提示界面

效果实现

nofollow" target="_blank" href="http://codepen.io/crystalYY/pen/jAkNVz">http://codepen.io/crystalYY/pen/jAkNVz

实现思路

借鉴了其他人已经实现了的结构,发现他们有一些人没有直接在td里写1,2,3或者退格什么的,而是又嵌套了一个button,我其实到现在也没有太理解为什么要这样,只是在排版的时候感觉到有些作用:因为margin对td 不起作用,只能设置padding。

函数计算最终结果,并捕获异常

eval函数第一次使用,w3c上对它的定义如下

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码

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

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

效果

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

在设置enter键按下获得结果的时候,keydown事件对象应该为整个table,并且应该阻止enter键的默认行为 获取元素样式时需要写一个兼容函数,因为obj.style.attr只能获取行间样式,要像获取外部样式需要用getComputedStyle(obj,false)[attr]或兼容IE的obj.currentStyle[attr]。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/32408.html

猜你在找的JavaScript相关文章