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


Posted in Javascript onMay 10, 2018

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

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

正文

html代码:

<div class="errorHint" id="errorHint"><img src="https://github.com/crystalYY/calculator/blob/master/img/error.png?raw=true"></div>
	<table cellpadding="0">
		<tr>
			<th colspan="5">计算器</th>
		</tr>
		<tr>
			<td colspan="5">
				<input type="text" value="0" name="showResult">
			</td>
		</tr>
		<tr>
			<td><button>7</button></td>
			<td><button>8</button></td>
			<td><button>9</button></td>
			<td><button class="setChange" id="backSpace">退格</button></td>
			<td><button class="setChange" id="clearNum">C</button></td>
		</tr>
		<tr>
			<td><button>4</button></td>
			<td><button>5</button></td>
			<td><button>6</button></td>
			<td><button>+</button></td>
			<td><button>-</button></td>
		</tr>
		<tr>
			<td><button>1</button></td>
			<td><button>2</button></td>
			<td><button>3</button></td>
			<td><button>*</button></td>
			<td><button>/</button></td>
		</tr>
		<tr>
			<td><button>0</button></td>
			<td><button>.</button></td>
			<td><button>%</button></td>
			<td colspan="2"><button class="setChange" id="gainResult">Enter</button></td>
		</tr>
	</table>
	<script type="text/javascript" src='index.js'>		
	</script>

 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?raw=trueg) left center no-repeat; border-radius: 10px;}
		table td{
			text-align: center;
			width: 100px;
			height: 40px;
			padding-left: 2px;
			padding-bottom: 2px;
		}
		table th{
			font-size: 18px;
			font-family:'楷体';
			color: 	#8B0000;
		}
		table td button{
			width: 98%;
			height: 98%;
			font-size: 16px;
			font-family: 'Microsoft yahei';
			background: none;
			color: 	#8B4726;
			outline:none;
			border:1px solid #000;
			border-radius: 5px;
			cursor: pointer;
		}
		table td input{
			width: 100%;
			margin: 10px 0;
			padding: 5px;
			border:1px solid #996c33;
			box-sizing: border-box;						
			text-align: right;
			font-size: 16px;
			font-family: 'Microsoft yahei';
		}

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?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,'top',-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<obtns.length;i++){
						obtns[i].style.borderColor='#000';
					}
					itat.style.borderColor='white';
					if(itat.className!='setChange'){
						if(oinput.value=='0'){
							oinput.value='';
							oinput.value+=itat.innerHTML;
						}
						else{
							oinput.value+=itat.innerHTML;
						}
					}else{
						if(itat.id=='backSpace'){
							oinput.value=oinput.value.toString().slice(0,-1);
						}
						else if(itat.id=='clearNum'){
							oinput.value='0';
						}else{
							var result=getResult();
							oinput.value=result;
						}
					}
				}
			});
		}
		init();

正常显示界面

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

错误提示界面

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

效果实现: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]。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
浅谈node.js 命令行工具(cli)
May 10 #Javascript
Js经典案例的实例代码
May 10 #Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 #Javascript
vuex与组件联合使用的方法
May 10 #Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 #Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 #Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 #Javascript
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php浏览历史记录的方法
2015/03/10 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Mac地址验证的javascript代码
2013/11/09 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
详解使用React制作一个模态框
2019/03/14 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
通用C#笔试题附答案
2016/11/26 面试题
农救科工作职责
2013/11/27 职场文书
大学毕业感言50字
2014/02/07 职场文书
廉政教育的心得体会
2014/09/01 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫