前端之家收集整理的这篇文章主要介绍了
JavaScript实现一个简易的计算器实例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
自己期末复习的时候就一直想要写一个计算器，闲暇的时候也在想具体怎么实现，觉得应该不难，但就是想写。昨天终于可以开始动工，刚开始还以为实现出来需要一个周左右至少两天的时间，想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧，昨天用了大概六个小时完成了从设计到具体实现。
@H_403_1@
有大概一个月没怎么写代码了，整个大脑都不适应，反应也慢，一些基本的东西都有点模糊不清了。可能是原来就没有太理解，再加上没有其余练习，导致效率有些低。@H_403_1@
正文
@H_
403_1@
HTML代码:@H_403_1@
@H_
403_1@
789456+-123*/0.%
代码:@H_403_1@
Box-sizing: border-
Box;
text-align: right;
font-size: 16px;
font-family: 'Microsoft yahei';
}
代码：@H_403_1@
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
正常显示界面
@H_403_1@
@H_403_1@
错误提示界面
@H_403_1@
@H_403_1@
：nofollow" target="_blank" href="http://codepen.io/crystalYY/pen/jAkNVz">http://codepen.io/crystalYY/pen/jAkNVz@H_403_1@
实现思路
@H_403_1@
403_1@
借鉴了其他人已经实现了的结构，发现他们有一些人没有直接在td里写1，2，3或者退格什么的，而是又嵌套了一个button，我其实到现在也没有太理解为什么要这样，只是在排版的时候感觉到有些作用：因为margin对td 不起作用，只能设置padding。
@H_403_1@
函数计算最终结果，并捕获异常
@H_403_1@
eval函数第一次使用，w3c上对它的定义如下@H_403_1@
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
@H_403_1@
有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预，最终的计算从input输入框中获取value值，然后把这个value值作为参数传递给eval，并使用try catch(exception)来捕获并处理异常。@H_403_1@
403_1@
因为每个button都需要有一个点击事件，如果一个一个去绑定，会导致代码十分的不简洁，而且效率也非常低。这时就可以考虑使用事件代理，由于事件冒泡的原理，我们可以把点击事件绑定在table上，然后通过判断事件发生的具体对象来做出不同的反应，调用不同的函数。@H_403_1@
效果
@H_403_1@
可以根据自己的设计思路，添加其他的效果。我主要是添加了一个错误提示的动画：如果eval函数抛出异常，则从上面缓慢滑下一个图片，并且通过setTimeout来设置了停留的时间。@H_403_1@
403_1@
在设置enter键按下获得结果的时候，keydown事件对象应该为整个table，并且应该阻止enter键的默认行为
获取元素样式时需要写一个兼容函数，因为obj.style.attr只能获取行间样式，要像获取外部样式需要用getComputedStyle(obj,false)[attr]或兼容IE的obj.currentStyle[attr]。@H_403_1@
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。@H_403_1@
