js加减乘除计算器

1.首先我们需要规划好计算器的结构

计算器的结构可以用好几种方法写：表格、button、列表…这篇博文我是用表格写的

1. body里先构建4*6的表格并调整好宽、高、边框等属性，需要使用table、tr、td标签以及td标签的colspan属性进行行的合并操作
2. 给表格内添加内容元素，这里我们需要使用的是input标签type=“button”

<style>
	*{margin: 0 auto;padding: 0;}
	#calculator{width: 350px;height: 500px;border: 1px solid black;cellspacing="0";}
	.box{width: 25%;height:16%;}
	input{width:100%;height:100%;font-size:22px;}
</style>
<table id="calculator">
	<tr>
		<td colspan="4">
			<input type="text" id="result" style="width: 100%;height: 100%;text-align:left;font-size:200%;border: 0;">
		</td>
	</tr>
	<tr>
		<td class="box"><input type="button" value="AC" onclick="clean()" id="AC"></td>
		<td class="box"><input type="button" value="%" onclick="num(this.id)" id="%"></td>
		<td class="box"><input type="button" value="/" onclick="num(this.id)" id="/"></td>
		<td class="box"><input type="button" value="*" onclick="num(this.id)" id="*"></td>
	</tr>
	<tr>
		<td class="box"><input type="button" value="7" onclick="num(this.id)" id="7"></td>
		<td class="box"><input type="button" value="8" onclick="num(this.id)" id="8"></td>
		<td class="box"><input type="button" value="9" onclick="num(this.id)" id="9"></td>
		<td class="box"><input type="button" value="+" onclick="num(this.id)" id="+"></td>
	</tr>
	<tr>
		<td class="box"><input type="button" value="4" onclick="num(this.id)" id="4"></td>
		<td class="box"><input type="button" value="5" onclick="num(this.id)" id="5"></td>
		<td class="box"><input type="button" value="6" onclick="num(this.id)" id="6"></td>
		<td class="box"><input type="button" value="-" onclick="num(this.id)" id="-"></td>
	</tr>
	<tr>
		<td class="box"><input type="button" value="3" onclick="num(this.id)" id="3"></td>
		<td class="box"><input type="button" value="2" onclick="num(this.id)" id="2"></td>
		<td class="box"><input type="button" value="1" onclick="num(this.id)" id="1"></td>
		<td class="box" rowspan="2"><input type="button" value="=" onclick="did()" id="did"></td>
	</tr>
	<tr>
		<td class="box" colspan="2"><input type="button" value="0" onclick="num(this.id)" id="0"></td>
		<td class="box"><input type="button" value="." onclick="num(this.id)" id="."></td>
	</tr>
</table>

2.js与html进行关联，用函数进行值传递及计算功能

1. 需要建立的函数有：记录获取的数据的函数、清除结果框内容的函数、计算的函数
2. 获取数字和符号时应该将它们都传递到结果框中
3. 符号“AC”是用来清除结果框中的数据
4. 当输入“=”时，需要将之前结果框中需要计算的数据清除并向其传递最终的计算结果

这里使用到了eval()函数，具体用法加以解释说明：
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

<script type="text/javascript">
	var m=0; //记录数字初始值为0
	
	//计算的函数
	function did(){
		document.getElementById("result").value=eval(document.getElementById("result").value);
	}
	
	//清除结果框数据的函数
	function clean(){
		document.getElementById("result").value=null;
		document.getElementById("result").focus();
	}
	
	//记录输入数据的函数
	function num(m){
		if(m=="%"){
			document.getElementById("result").value=document.getElementById("result").value/100;
		}
		else{document.getElementById("result").value+=document.getElementById(m).value;
		}
	}
</script>