使用html+css+javaScript 完成计算器

一、先用html与css搭建骨架

思路:

1. 将计算器的数字按钮放进一个表格里,
2. 再通过css修饰
3. 然后对指定的数字按钮或功能按钮添加事件
4. 将需要计算的式子放进一个字符串里,最后通过全局方法eval( )计算出来

html的骨架搭建

//这里的用一个 div 将内容包住, 然后再align="center" 将计算机居中
<div align="center">
	<div class="main_div">
		<div class="top_div">wswsjwq的计算器</div>
		<textarea id="main_div_area" cols="35px" rows="3px"></textarea>
		<table class="mian_div_table" cellpadding="0" cellspacing="10">
			<tr>
				<td class="cell_nub">7</td>
				<td class="cell_nub">8</td>
				<td class="cell_nub">9</td>
				<td class="cell_nub">+</td>
			</tr>
			<tr>
				<td class="cell_nub">4</td>
				<td class="cell_nub">5</td>
				<td class="cell_nub">6</td>
				<td class="cell_nub">-</td>
			</tr>
			<tr>
				<td class="cell_nub">1</td>
				<td class="cell_nub">2</td>
				<td class="cell_nub">3</td>
				<td class="cell_nub">*</td>
			</tr>
			<tr>
				<td class="cell_nub">0</td>
				//使用οnclick="函数()" 添加点击事件
				<td onclick="clearArea()">C</td>
				<td onclick="sum()">=</td>
				<td class="cell_nub">/</td>
			</tr>
		</table>
	</div>
</div>

效果:

css点缀修饰

		<style type="text/css">
			.main_div {
				width: 500px;
				height: 350px;
				background-color: #F0F8FF;
			}
			.top_div {
				height: 50px;
				line-height: 50px;
				background-color: #DFE9F5;
				font-weight: bold;
				font-size: x-large;
				font-family: "宋体";
			}
			.mian_div_table {
				 width: 500px;
				 height: 150px;
			}
			.mian_div_table td {
				padding-left: 40px;
				font-size: 30px;
				background-color: #A9A9A9;
			}
			#main_div_area {
				font-size: xx-large;
			}
		</style>

效果:

最后的大头javaScript:

	<script type="text/javascript">
		// 获取到每个数字按键的document对象
		var Btn = document.getElementsByClassName("cell_nub");
		//获取文本域对象,***注意此处只能使用id来获取文本域对象***
		var areaObj = document.getElementById("main_div_area");
		//定义一个字符串来接收输入内容
		var Str = "";
		var arr = [];
		//给同一个类添加事件
		for (var i = 0; i < Btn.length; i++) {
		  arr.push(i);
		  arr.forEach((value) => {
			Btn[value].onclick = function () {
				//打印出按压结果以便观看
			  console.log("按压值: "+Btn[value].innerHTML);
			  //将值传给拼接字符串的方法add()
			  add(Btn[value].innerHTML);
			};
		  });
		}
		
		//字符串拼接方法
		function add(temp){
			console.log("拼接字符串方法执行");
			console.log(Str.charAt(Str.length-1));
			//如果此时的按压值是+-*/与上一个字符重复,就要覆盖上一次的符号
			if((Str.charAt(Str.length-1)=="+"||Str.charAt(Str.length-1)=="-"||Str.charAt(Str.length-1)=="*")&&(temp=="+"||temp=="-"||temp=="*"||temp=="/")){
				console.log("此时的按压值 :"+temp);
				//截取0到最后一个,不包括最后一个
				Str=Str.substring(0,Str.length-1);
				console.log("删除重复符号后"+Str);
				Str+=temp;
				console.log("添加后"+Str);
			}else{
				Str+=temp;
			}
			areaObj.value = Str;
			console.log("字符串Str="+Str);
		}
		//使用eval()求和的方法
		function sum(){
			console.log("求和方法执行");
			console.log("结果是: "+eval(Str));
			areaObj.value = eval(Str);
		}
		//清除的方法
		function clearArea(){
			console.log("清除方法执行");
			Str="";
			console.log("清除后"+Str);
			areaObj.value = Str;
		}
	</script>

当我写javaScript时候遇到的问题;

1. 就是获取文本域的标签对象(也叫文本域的DOM对象)时候,我给那个文本域标签使用class命名,获取DOM对象时候,无法修改文本域里的内容
   如图:
   

点击数字按键并不能将按键的内容放到文本域里

2. 在我想将获取的计算式子放到文本域时候老想着使用

areaObj.innerHTML = "我是获取的按钮值";

这样无法获取到,因为文本域标签时功能性标签,并不是想div那样的包裹标签,
所以应该用value

areaObj.value = "我是获取的按钮值";

3. 还要再注意一下给一类标签添加事件的代码块

			var arr = [];
			//用for循环给获取的一组类标签加事件
		for (var i = 0; i < Btn.length; i++) {
		  arr.push(i);
		  arr.forEach((value) => {
			Btn[value].onclick = function () {
				//打印出按压结果以便观看
			  console.log("按压值: "+Btn[value].innerHTML);
			  //将值传给拼接字符串的方法add()
			  add(Btn[value].innerHTML);
			};
		  });
		}

如果foreach忘记的兄弟们 点这里

4. 还有一点
   如果要在javaScript里获取对象, 那就要写在body的后面

这是由于脚本语言是从上向下加载顺序有关

---

若有错误, 及时提出,作者秒回