JavaScript （制造简易计算器）

注意：该计算器只能进行个位数的加减乘除

思路要点：（1）在读取按键的数字的时候，通过 :for循环下的 集合【i】.onclick=function(){ 变量=this.innerHTML}来取得，必须要使用“this”来代替 “被取集合【i】”，否则无法取到值，应该是由于“集合【i】”被设置了onclick=function函数的原因。

（2）然后在取到按键数字的同时判断按键次数，创造变量接收第一次，第二次，第三次取到的字符。同时判断第二次取到的加减乘除号，分情况进行计算。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易计算器</title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			#bigk{
				 320px;
				height: 450px;
				background-color: gainsboro;
				border-radius: 8px;
				box-shadow: 5px 5px 5px darkgray;
				margin-top: 30px;
				border: 1px solid black;
				overflow: hidden;
			}
			#sck{
				 312px;
				height: 30px;
				border: 1px solid black;
				margin-top: 10px;
				background-color: gainsboro;
				border-radius: 4px;
			}
			.hengk{
				 312px;
				height:100px ;
			}
			.xiaok{
				float: left;
				 70px;
				height: 90px;
				border: 1px solid black;
				margin-top: 5px;
				margin-left: 5px;
				font-size: 24px;
				font-weight: bolder;
				text-align: center;
				line-height: 90px;
				border-radius: 4px;
			}
			.xiaok:hover{
				cursor: pointer;
				box-shadow: 3px 3px darkgray;
			}
		</style>
	</head>
	<body>
		<div id="bigk">
			<div id="sck">
				<input type="text" value="" style=" 312px;height: 30px;border: none;background-color:gainsboro ;"/>
			</div>
			<div class="hengk">
				<div class="xiaok">7</div>
				<div class="xiaok">8</div>
				<div class="xiaok">9</div>
				<div class="xiaok">/</div>
			</div>
			<div class="hengk">
				<div class="xiaok">4</div>
				<div class="xiaok">5</div>
				<div class="xiaok">6</div>
				<div class="xiaok">*</div>
			</div>
			<div class="hengk">
				<div class="xiaok">1</div>
				<div class="xiaok">2</div>
				<div class="xiaok">3</div>
				<div class="xiaok">-</div>
			</div>
			<div class="hengk">
				<div class="xiaok">0</div>
				<div class="xiaok">.</div>
				<div class="xiaok">=</div>
				<div class="xiaok">+</div>
			</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	var num = document.getElementsByClassName("xiaok");
	var a = 0;
	var b = 0;
	var c = 0;
	var biao = 0
	for(var i = 0 ;i<num.length;i++){
		num[i].onclick=function(){
			biao++;
			document.getElementsByTagName("input")[0].value+=this.innerHTML;
			if(biao ==1){
				a =Number(this.innerHTML) ;
			}else if(biao==2){
				b= this.innerHTML;
			}else if(biao==3){
				c = Number(this.innerHTML);
			}
			if(this.innerHTML=="="){
			switch (b) {
				case"+":document.getElementsByTagName("input")[0].value=a+c;break;
				case"-":document.getElementsByTagName("input")[0].value=a-c;break;
				case"*":document.getElementsByTagName("input")[0].value=a*c;break;
				case"/":document.getElementsByTagName("input")[0].value=a/c;break;
			
		}
			}
	     }
	}
	
		
</script>