HTML5+CSS3+JS：计算器（代码全+解析+实现结果）

HTML如何实现一个计算器？

代码如下：

	
		
		Yummy计算机
		
		.bg{
			width:35%;
			height: 400px;
			background:pink;
			margin-left: 35%;
			margin-right: 35%;
		}
		.uup{
			width: 100%;
			height: 9%;
			text-align: "center";
		}
		.up{
			width: 88%;
			height: 12%;
			border: solid 1px black;
			margin: 3% 5% 2% 6%;
		}
		.down{
			width: 88%;
			height: 65%;
			border: solid 1px black;
			margin: 2% 6% 4% 6%;
		}
		.logo{
			width: 32%;
			height: 95%;
			margin-top: 0px;
			margin-left: 0px;
			/*background-color: pink;*/
			font-size: 24px;
			color: white;
		}
		.show{
			width: 100%;
			height: 100%;
			background-color: white;
		}
		.numtable tr td{
			width: 28%;
			height: 25%;
		}
		.numtable input{
			width: 75%;
			height: 100%;
			margin: 8%;
			background-color: white;
		}
		
		
		
			window.onload=initZero;
	var str = new Array();//保留输入字符数组
	var numStr = new Array();//数字栈
	var charStr = new Array();//运算符栈
	var flag = new Array();//负数标志位，true表示负数，与运算符栈相等
	var buttonId = new Array("reset","plus","minus","del","num7","num8","num9","multiply","num4","num5","num6","divide","num1","num2","num3","point","leftbracket","num0","rightbracket","equal");
	//按钮ID名
	function $(id){
		return document.getElementById(id);
	}
	function initZero(){
		$("inputframe").value=0;//结果显示框清零
		initCE();//保存数据的栈和数组“清空”
		addListener();//为每个按钮添加click事件监听器
	}
	function initCE(){
		while(str.length!=0){
			str.pop();//删除数组最后一个元素
		}
		while(numStr.length!=0){
			numStr.shift();//删除数组第一个元素
		}
		while(charStr.length!=0){
			charStr.shift();//删除数组第一个元素
		}	
		while(flag.length!=0){
			flag.shift();
		}
		charStr[0] = "0";//运算符栈先插入一个优先级最低的“0”元素
		flag[0] = false;
	}
	function addListener(){
		for (var i=0; ipointNum){//升级后运算结果位数比小数点位数多
				var num = resStr.length-pointNum;
				var sstr = resStr.split("");
				resStr="";
				for(var i=0;i