在公司自学前端之计算器

	<div class="di">
		
		<input type="text" id="a"  class="red"><br />
		<input type="button"  value="+" onclick="d()" class="btn">
		<input type="button"  value="-" onclick="e()" class="btn">
		<input type="button"  value="*" onclick="f()" class="btn">
		<input type="button"  value="/" onclick="g()" class="btn"><br>
		<input type="text" id="b"  class="red"><br />
        <input type="text" value='=' class="red" ><br />
		<input type="text" id="c" value='' class="red" ><br>
		</div>
<script>
			
			var z;
			function d(){//加法；
				var x=document.getElementById("a").value;//第一个值；
				var y=document.getElementById("b").value;//第二个值；
				 z=Number(x)+Number(y);//求和；
			document.getElementById("c").value=z;//和输出在第三个框；
				}
				function e(){//减法
					var x=document.getElementById("a").value;//第一个值；
					var y=document.getElementById("b").value;//第二个值；
					 z=Number(x)-Number(y);//求差；
				document.getElementById("c").value=z;//输出；
					}
					function f(){//乘法；
						var x=document.getElementById("a").value;//第一个值；
						var y=document.getElementById("b").value;//第二个值；
						 z=Number(x)*Number(y);//求积；
					document.getElementById("c").value=z;//输出；
						}
						function g(){//除法；
							var x=document.getElementById("a").value;//第一个值；
							var y=document.getElementById("b").value;//第二个值；
							 z=Number(x)/Number(y);//求商；
						document.getElementById("c").value=z;//输出；
							}
		</script>

.btn{
	
	width: 52px;
	height: 52px;
	background-color: #ffbef0;
	border: #FF1493 2px groove;
	border-radius: initial;
	border-width: thick;
	border-radius: 3px;
	display: inline;
	text-align:center;
	font-family: "times new roman";
	border-bottom: azure 5px dashed   ;
}
.red{
	background-color: #ffbef0;
	border-radius: 3px;
	width: 220px;
	height: 50px;
	font-size: 35px;
	font: "calisto mt";
	border: #FF1493 2px groove;
	display: inline;
	font-family: "times new roman";
	text-align: center;
    border-bottom: azure 5px dashed   ;
}