js实现简单计算器

最新推荐文章于 2024-04-25 09:54:19 发布

natural_live

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量1.4k

点赞数 2

分类专栏： JS学习文章标签： javascript 计算器

本文链接：https://blog.csdn.net/natural_live/article/details/76502250

版权

JS学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先看一下效果图：

可能是最近一段时间用ul用多了，这些块都是li元素，后面发现button好像更好用一些。但还是能做的。

布局就不说了，会html和css的这个肯定会，贴上代码：

<style>
	body{margin:0;padding:0;}
	
	.container{
		margin:auto;
		margin-top:200px;
		width:300px;
		height:300px;
		background:#0066ff;
	}

	.screen{
		float:left;
		margin:15px;
		margin-bottom:0;
		width:270px;
		height:50px;
		background:#FFFFFF;
	}

	.container ul{
		float:left;
		margin:15px;
		margin-top:0;
		padding:0;
		width:270px;
	}

	.container ul li{
		list-style:none;
		text-align:center;
		display:block;
		float:left;
		margin-left:20px;
		margin-top:20px;
		padding:7px;
		width:30px;
		height:20px;
		background:#3300cc;
	}

	.container ul li a{
		text-decoration:none;
		font-size:20px;
		color:#ffffff;
	}

  </style>

首先添加鼠标移入移出相应的块的事件，先获取元素：

var oLi=document.getElementsByTagName("li");

再建一个for循环，给每一个li元素加入鼠标事件：

for(var i = 0;i < oLi.length;i++){//给每个li元素加上鼠标移入移出事件
			//console.log(i);
			oLi[i].οnmοuseοver=function(){
				this.style.backgroundColor="#f96";
				//console.log(this)
			}
			oLi[i].οnmοuseοut=function(){
				this.style.backgroundColor="#30c";
			}

这里要用this,表示是哪个li元素发生的事件，就对哪个li元素做相应的改变，如果用oLi[i]的话，因为加载完js后，i变成了oLi.length，会报错，并且也无法区别不同的li元素。

接下来加入点击事件：

			oLi[i].οnclick=function(){//添加鼠标点击事件
				var oC = this.childNodes;//获取li元素下的a元素
				var flag;//判断标志
				switch(oC[0].innerText){//判断点击的是哪种类型
					case '1':
					flag=0;
					break;
					case '2':
					flag=0;
					break;
					case '3':
					flag=0;
					break;
					case '4':
					flag=0;
					break;
					case '5':
					flag=0;
					break;
					case '6':
					flag=0;
					break;
					case '7':
					flag=0;
					break;
					case '8':
					flag=0;
					break;
					case '9':
					flag=0;
					break;
					case '0':
					flag=0;
					break;

					case '+':
					flag=1;
					break;
					case '-':
					flag=1;
					break;
					case '*':
					flag=1;
					break;
					case '/':
					flag=1;
					break;

					case 'Del':
					flag=2;
					break;

					case '=':
					flag=3;
					break;
				}
				if(flag == 0){
					if(oFlag != 2){
						result += oC[0].innerText;
						oFlag = 0;
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
				else if(flag == 1){
					if(oFlag != 1){
						//console.log(oC[0].innerText)
						//console.log(result)
						oFlag= 1;
						result += oC[0].innerText;
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
				else if(flag == 2){
					result="";
					oT.value = result;
				}
				else{
					if(oFlag != 1){
						oFlag = 2;
						result=eval(result);
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
			}}

函数作用的百度都有，我就不解释了。这里讲一下思想，因为是要给每个li元素添加点击事件，但要知道是点击的哪个，就要获取li元素下的a元素的innerText。

然后我分了四类，数字一类，运算符号一类，Del一类，等于号一类，用一个flag来区分，这里我为什么要把数字和运算符号分开，是为了防止输入错误，比如4**之类的，

会提示输入错误。只要加入一个全局变量oFlag,为什么要用全局，主要是想保存它的值，如果放函数里，每次点击事件初始化变量就会改变它的值。oFlag保存的是上一个

输入的是什么类型的值，比如上一个是运算符，下一个只能是数字。这里列出以下会报错的输入：

上一个是运算符，下一个是运算符或等于。
上一个是等于，下一个数字。

存在的问题： 1.功能过于单一

2.小数部分没做

这是一个只实现了四则运算的计算器，如果有时间，还可以加上其他的运算。

这里贴下body和js的代码：

<body>
	<div class="container">
		<div class="screen">
			<input id = "text" type = "text" style="width:100%;height:100%;text-align:right;" readonly="readonly"></input>
		</div>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">Del</a></li>

			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">*</a></li>

			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#">/</a></li>

			<li><a href="#">+</a></li>
			<li><a href="#">0</a></li>
			<li><a href="#">-</a></li>
			<li><a href="#">=</a></li>
		</ul>
	</div>
	<script>
		var oLi=document.getElementsByTagName("li");
		var oT = document.getElementById("text");
		var oA=document.getElementsByTagName("a");
		var result="";
		var oFlag;//判断标志,防止输入错误
		for(var i = 0;i < oLi.length;i++){//给每个li元素加上鼠标移入移出事件
			//console.log(i);
			oLi[i].οnmοuseοver=function(){
				this.style.backgroundColor="#f96";
				//console.log(this)
			}
			oLi[i].οnmοuseοut=function(){
				this.style.backgroundColor="#30c";
			}
			//console.log(i);
			oLi[i].οnclick=function(){//添加鼠标点击事件
				var oC = this.childNodes;//获取li元素下的a元素
				var flag;//判断标志
				switch(oC[0].innerText){//判断点击的是哪种类型
					case '1':
					flag=0;
					break;
					case '2':
					flag=0;
					break;
					case '3':
					flag=0;
					break;
					case '4':
					flag=0;
					break;
					case '5':
					flag=0;
					break;
					case '6':
					flag=0;
					break;
					case '7':
					flag=0;
					break;
					case '8':
					flag=0;
					break;
					case '9':
					flag=0;
					break;
					case '0':
					flag=0;
					break;

					case '+':
					flag=1;
					break;
					case '-':
					flag=1;
					break;
					case '*':
					flag=1;
					break;
					case '/':
					flag=1;
					break;

					case 'Del':
					flag=2;
					break;

					case '=':
					flag=3;
					break;
				}
				if(flag == 0){
					if(oFlag != 2){
						result += oC[0].innerText;
						oFlag = 0;
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
				else if(flag == 1){
					if(oFlag != 1){
						//console.log(oC[0].innerText)
						//console.log(result)
						oFlag= 1;
						result += oC[0].innerText;
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
				else if(flag == 2){
					result="";
					oT.value = result;
				}
				else{
					if(oFlag != 1){
						oFlag = 2;
						result=eval(result);
						oT.value = result;
					}else{
						alert("输入错误！");
					}
				}
			}
		}
		/*for(var i = 0;i < oA.length;i++){
			console.log(i);
			oA[i].οnclick=function(){
				
			}
		}*/
	</script>
 </body>

natural_live

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现简单计算器

先看一下效果图：可能是最近一段时间用ul用多了，这些块都是li元素，后面发现button好像更好用一些。但还是能做的。布局就不说了，会html和css的这个肯定会，贴上代码： body{margin:0;padding:0;} .container{ margin:auto; margin-top:200px; width:300px; height:3
复制链接

扫一扫