原生js實作電腦

效果圖
原生js實作電腦
邏輯
1、擷取被點選的按鈕的值。
2、判斷這個是數字、運算符号、小數點。
3、運算符号進行運算，小數點和數字push進數組，然後轉換為數字。
<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.wrap{
		width: 250px;
		height: 250px;
		margin: 100px auto;
		background-color: #A8A8A8;
		border:10px solid #A8A8A8;
		border-radius: 5px;
		box-shadow: 1px 1px 1px #A8A8A8;
	}
	.result{
		width: 250px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: #EEE685;
		border-radius:5px 5px 0 0;
		box-shadow: 1px 1px 1px #A8A8A8;
		box-shadow: -0.5px -0.5px 0.5px 0.3px #FFF5EE inset;
	}
	.box{
		width: 250px;
		height: 200px;
		background: #969696;
		position: relative;
		cursor: pointer;
		border-radius: 0 0 5px 5px;
		box-shadow: -0.5px -0.5px 0.5px 0.3px #FFF5EE inset;
	}
	.button{
		width: 40px;
		height: 40px;
		margin: 5px;
		background: white;
		float: left;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
	}
	.big{
		width: 90px;
		height: 40px;
	}
	.spe{
		width: 40px;
		height: 90px;
	}
	.position{
		position: relative;
		left: 50px;
		background-color: orange;
	}
	.spe2{
		position:relative;
		top: -50px;
		line-height: 90px;
	}
	.orange{
		background-color: orange;
	}
	.button:hover{
		background-color: rgba(0,0,0,0.6);
	}
	</style>
</head>
	<div class="wrap">
		<div class="result"></div>
		<div class="box">
			<div class="button big" >c</div>
			<div class="button">1</div>
			<div class="button">2</div>
			<div class="button orange">+</div>
			<div class="button">3</div>
			<div class="button">4</div>
			<div class="button">5</div>
			<div class="button">6</div>
			<div class="button orange">-</div>
			<div class="button">7</div>
			<div class="button">8</div>
			<div class="button">9</div>
			<div class="button position">×</div>
			<div class="button big">0</div>
			<div class="button">.</div>
			<div class="button spe spe2">=</div>
			<div class="button orange">÷</div>
		</div>
	</div>
<body>
<script type="text/javascript">
	var num1=0;
	var num2='+';
	var num3=0;
	var x=null;
	var arr=[];
	var con=document.getElementsByClassName('result')[0];
	for(var i=0;i<17;i++){
		var but=document.getElementsByClassName('button')[i];
		but.οnclick=function(){
			x=this.innerHTML;
			main();
		}
	}
	function main(){
		if(!isNaN(x) || x==='.'){
			arr.push(x);
			con.innerHTML=arr.join('');
		}else if(x==='c'){
			num1=0;
			num2='+';
			num3=0;
			x=null;
			arr=[];
			con.innerHTML=num1;
		}else{
			num3=parseFloat(arr.join(''));
			count();
			con.innerHTML=num1;
			arr=[];
			num2=x;
		}
	}
	function count(){
		if(num2==='+'){
			num1+=num3;
		}
		if(num2==='-'){
			num1-=num3;
		}
		if(num2==='×'){
			num1*=num3;
		}
		if(num2==='÷'){
			num1/=num3;
		}
	}
</script>
</body>
</html>