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

站长资源 2024/11/27 佚名

2 0 1

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

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

正文

html代码:

<div class="errorHint" id="errorHint"><img src="/UploadFiles/2021-04-02/error.png">

 CSS代码:


*{margin: 0px; padding: 0px;}
		.errorHint{position: absolute; left: 130px; top:-282px;}
		.showError{border:1px solid red;}
		table{ border: 2px solid #996c33; width: 550px; padding: 10px; margin: 150px auto; background:url(https://github.com/crystalYY/calculator/blob/master/img/bg2.jpg"color: #800000">JS代码：


var oinput=document.getElementsByTagName('input')[0];
		//获取外部样式
		function getStyle(obj, name)
		{
			if(obj.currentStyle)
			{
				return obj.currentStyle[name];
			}
			else
			{
				return getComputedStyle(obj, false)[name];
			}
		}
		//渐变动画
		function move(obj,attr,tar){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var cur=parseInt(getStyle(obj,attr));
				var itarget=parseInt(tar);
				var speed=(itarget-cur)/6;
				speed=speed>0"text-align: center">
错误提示界面 



效果实现：http://codepen.io/crystalYY/pen/jAkNVz
实现思路
1.使用table画出整个界面。 


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


2.使用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]。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    js简易计算器,js实现简易计算器,js简易计算器代码