js实现简单整数计算器-------Day71

最新推荐文章于 2024-04-09 11:57:58 发布

麦田里的少年

最新推荐文章于 2024-04-09 11:57:58 发布

阅读量1.1k

点赞数

分类专栏：工作前三年 - 前端基础文章标签：学习记录 javascript css3

本文链接：https://blog.csdn.net/marSmile_tbo/article/details/38051383

版权

工作前三年 - 前端基础专栏收录该内容

95 篇文章 3 订阅

订阅专栏

之所以我把它叫做整数计算器，是因为在我完成之后，我发现了一个大问题，那就是我压根就忘记了小数点的情况，这应该算是需求分析做的不彻底吧，而现阶段我也不想再重复进行设计修改了，这里又再次重温了一句话----“需求大于技术”。

其实昨天晚上已经设计好了界面，但是今天有朋友看到，又提了几个小意见，于是便重新改动几个小地方，这次再重新提交以下图片，你能看出改动了那些么：

这里我忽略掉对运算符号的改变，我改动的几个地方：1、在初始阶段，显示数字的地方是显示“0”的；2、添加了开关按钮“on/off”；3、改变了开关按钮的按钮，保持了一致性；4、添加了恢复原始状态（未用）；

这样可以看出来，实际上改动的地方并不是特别多，所以今天主要是来记录，实现计算问题的时候遇到的问题，css最后会一同附上。

这里来首先阐述下，我对计算过程的拆分，我想象的是：先点击第一个数字记录，然后记录运算符号，然后点击记录第二个数字，然后得到结果，再次点击运算记录运算后，将结果看成第一个数字，再点击记录第二个数字，再进行运算，这里先来记录下，实现过程中，遇到的细节问题：

1、trim（）方法，在获取.innerHTML的值进行对比或者操作的时候，这个方法是必不可少的；

2、substring（）方法，这个是在点击过程中发现的，因为一旦数字个数录入过多，则会超出边界，就失去了相似性

再有的话就是对操作先后顺寻的问题，也就是逻辑上的问题了，就不多说了，直接上代码，这次是全的，可能也还有不足，现在看来简单的整数计算是可以了，记得哦，只能是整数哦，出现小数就不能用了

html部分

 <center>
	<div id="back">
		<div id="monitor">0</div>
		<div id="operateZone">
			<div class="row">
				<div id="one" class="button">1</div>
				<div id="two" class="button">2</div>
				<div id="three" class="button">3</div>
				<div id="add" class="oper">+</div>
			</div>
			<div class="row">
				<div id="four" class="button">4</div>
				<div id="five" class="button">5</div>
				<div id="six" class="button">6</div>
				<div id="minus" class="oper">-</div>
			</div>
			<div class="row">
				<div id="seven" class="button">7</div>
				<div id="eight" class="button">8</div>
				<div id="nine" class="button">9</div>
				<div id="time" class="oper">*</div>
			</div>
			<div class="row">
				<div id="zero" class="button">0</div>
				<div id="clear" class="oper">c</div>
				<div id="equal" class="oper">=</div>
				<div id="divide" class="oper">/</div>
			</div>
			<div class="row">
				<div id="onoff">on/off</div>
			</div>
		</div>
	</div>
</center>

css部分：

#back{
	width:400px;
	height:640px;
	background:cyan;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:5px 5px 5px green,5px 5px 5px green inset;     
  }
  #monitor{
	width:360px;
	height:70px;
	background:#fff;
	margin-top:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:5px 5px 5px green,5px 5px 5px green inset;  
	text-align:right;
	line-height:70px;
	font-size:50px;
  }
  #operateZone{
	width:360px;
	height:450px;
	margin-top:50px;
  }
  .row{
	width:360px;
	height:70px;
	margin-top:15px;
  }
  .button{
	height:50px;
	width:65px;
	background:#fff;
	float:left;
	margin-left:20px;
	border-radius:32.5px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-2px -2px 5px green,-2px -2px 5px green inset;  
	font-size:30px;
  }
   .button:hover{
	height:50px;
	width:65px;
	background:#ddd;
	float:left;
	margin-left:20px;
	border-radius:32.5px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-3px -3px 7px green,-3px -3px 4px green inset;  
	font-size:30px;
  }
    .oper{
	height:50px;
	width:65px;
	background:#fff;
	float:left;
	margin-left:20px;
	border-radius:32.5px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-2px -2px 5px green,-2px -2px 5px green inset;  
	font-size:30px;
  }
   .oper:hover{
	height:50px;
	width:65px;
	background:#ddd;
	float:left;
	margin-left:20px;
	border-radius:32.5px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-3px -3px 7px green,-3px -3px 4px green inset;  
	font-size:30px;
  }
  #onoff{
	width:300px;
	height:50px;
	background:#fff;
	border-radius:10px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-2px -2px 5px green,-2px -2px 5px green inset;  
	font-size:30px;
  }
  #onoff:hover{
	width:300px;
	height:50px;
	background:#ddd;
	border-radius:10px;
	line-height:50px;
	-moz-box-shadow:5px 5px 15px #999 inset;              
    -webkit-box-shadow:5px 5px 15px #999 inset;           
    box-shadow:-3px -3px 7px green,-3px -3px 4px green inset;  
	font-size:30px;
  }
  </style>

js部分：

window.οnlοad=function(){
		var begin=true;//这个是判定是否为初始状态
		var open=true;//这个是已经开启
		var oneNum="";//这是要计算的第一个数
		var anotherNum="";//这是要计算的第二个数
		var symbol="";//这是记录的操作
		var result="";//这是记录计算结果
		var step=1;//这是记录计算的步骤
		
		var operate=document.getElementById("operateZone");//操作
		var show=document.getElementById("monitor");//显示
		
		var count=function(){
			if(symbol.trim()=="+"){
						result=parseInt(oneNum)+parseInt(anotherNum);
					}
					if(symbol.trim()=="-"){
						result=parseInt(anotherNum)-parseInt(oneNum);
					}
					if(symbol.trim()=="*"){
						result=parseInt(oneNum)*parseInt(anotherNum);
					}
					if(symbol.trim()=="/"){
						result=parseInt(anotherNum)/parseInt(oneNum);
					}
					show.innerHTML="<_"+check(result);
		}
		var check=function(value){
				if(value.length>12){
					return value.substring(value.length-12);
				}
				return value;
		}

		operate.οnclick=function(event){
			var event=event||window.event;
			var any=event.target||event.srcElement;
			if(any.id=="onoff"){
				show.innerHTML=show.innerHTML.trim()=="0"?"":"0";
				open=false;
			}
			if(open){
				if(begin){//如果是第一次进行计算
					if(any.className=="button"&&step==1){
						oneNum=oneNum+any.innerHTML.trim();					
						show.innerHTML=check(oneNum);
					}
					if(any.className=="oper"&&step==2){
						count();
						symbol=any.innerHTML.trim();
						anotherNum="";
						oneNum=result;
						begin=false;
					}
					if(any.className=="oper"&&step!=2){
						symbol=any.innerHTML.trim();
						show.innerHTML=symbol;
						step=2;
					}
					if(any.className=="button"&&step==2){
						anotherNum=anotherNum+any.innerHTML.trim();
						show.innerHTML=check(anotherNum);
					}
				}else{//如果不是第一次进行计算了
					if(symbol!="="){//之前点击的为其他操作符号
						if(any.className=="button"){//直接点击数字
							anotherNum=anotherNum+any.innerHTML.trim();
							show.innerHTML=check(anotherNum);
						}
						if(any.className=="oper"){//先点击操作符号
							count();
							symbol=any.innerHTML.trim();
							anotherNum="";
							oneNum=result;
						}
					}
					if(symbol=="="){//之前的点击的为“=”
						if(any.className=="button"){//直接点击数字
							begin=true;
							oneNum=any.innerHTML.trim();
							show.innerHTML=check(oneNum);
							step=1;
							anotherNum="";
						}
						if(any.className=="oper"){//先点击操作符号
							symbol=any.innerHTML.trim();
							show.innerHTML=symbol;
						}
					}
				}
			}
		}			
	}

这个计算器，虽然简单实现了，但是在实现过程中才发现，并不像自己想象的那么容易，而且这次编写的实现代码实在是啰嗦臭长，不堪入目，等有时间想再重新弄计算器的时候一定要优化下，太啰嗦了现在。

不知道这济南会来场多大的雨，实在是热的要命啊..