js原生计算器demo

HTML：

<section id="model">
		<div class="result"></div>
		<div class="box">
			<button class="button big">C</button>
			<button class="button">1</button>
			<button class="button">2</button>
			<button class="button yellow">+</button>
			<button class="button">3</button>
			<button class="button">4</button>
			<button class="button">5</button>
			<button class="button">6</button>
			<button class="button yellow">-</button>
			<button class="button">7</button>
			<button class="button">8</button>
			<button class="button">9</button>
			<button class="button">0</button>
			<button class="button yellow">×</button>
			<button class="button big">=</button>
			<button class="button">Skin</button>
			<button class="button">Egg</button>
			<button class="button yellow">÷</button>
		</div>
	</section>

css：

<style>
	#model{
			width: 305px;
			height: 360px;
			background-color: #FFF;
			/*background-color: #000;*/
			margin: 0 auto;
			border-radius: 50px;
	}
	.result{
		    width: 295px;
		    height: 80px;
		    margin:15px auto;
		    background-color: #fff;
		    box-shadow: 1px 1px 10px red;
		    border-radius: 20px;
		    font-size: 24px;
		    text-indent: 1em;
		    line-height: 80px;
		    font-weight: 600;
		    animation:myfirst 5s;
			-moz-animation:myfirst 5s; /* Firefox */
			-webkit-animation:myfirst 5s; /* Safari and Chrome */
			-o-animation:myfirst 5s; /* Opera */
	}
	.box{
			margin: 0 10px;
	}
	.button{
			width: 50px;
	    	height: 50px;
	    	border: none;
	    	background-color: #c9c9c9;
	    	margin-right: 2.2px;
	    	margin-bottom: 8px;
	    	box-shadow: 2px 2px 10px blue;
    		border-radius: 10px;
    		cursor: pointer;
    		outline: none; 
	}
	.big{
			width: 105px;
	}
	.yellow{
			background-color:yellow;
	}
	.position {
       		height: 100px;
    		top: -58px;
    		position: relative;
	}
	.button:hover{
			background-color: rgba(0,0,0,0.6);
	}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
</style>

Javascript：

<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<18;i++){
		var but=document.getElementsByClassName('button')[i];
		but.onclick=function(){
			x=this.innerHTML;
			main();
		}
	}
	function main(){
		if(!isNaN(x) || x==='.'){//1：先判断变量x值是否为数字或者.，如果逻辑运算符有一边条件成立，true
			arr.push(x);//2：定义arr数组，然后第一次判断变量x的值可能为数值或者.，添加到arr数组末尾添加元素
			con.innerHTML=arr.join('');//3：arr数组所有元素放入一个字符串复制给变量con
		}else if(x==='C'){//4:判断变量值是否是c，如果是执行if里代码块，如过不是只想下一个判断(注意：字母区分大小写)
			num1=0;
			num2='+';
			num3=0;
			x=null;
			arr=[];
			con.innerHTML=num1;//5:变量赋值，清空数组
		}else{//6：如果不是数值，不是.，不是c，那么执行else代码块。
			num3=parseFloat(arr.join(''));//7：解析字符串，返回一个浮点值，赋值num3
			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>