JS实现简易网页计算器

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。

一、实现功能

1. 完成计算器的加减乘除的基本计算功能
2. 实现输入框中的字符串拼接

二、实现思路

1. 完成基本布局
2. js实现运算功能

三、知识点

e.target||e.srcElement ：获取触发事件的元素

四、具体代码实现

	
计算器
	

		

			
			C
		
		

			7
			8
			9
			/
		
		

			4
			5
			6
			*
		
		

			1
			2
			3
			-
		
		

			0
			.
			=
			+
		
	

五、js部分详解

function cal(e) {
	//获取触发事件的元素
	var obj = e.target||e.srcElement;
	if(obj.nodeName != "BUTTON"){
		return;
	}
	var v = obj.innerHTML;
	var screen = document.getElementById("screen");
	if(v == "C"){
		screen.value = 0;
	}else if(v == "="){
		//获取到输入框的值
		var exp = screen.value;
		try{
			var result = eval("("+exp+")");
			//将计算结果赋值给输入框
			screen.value = result;
		}catch(e){
			console.log(e);
			screen.value = "error";
		}
	}else{
		if(screen.value == 0){
			screen.value = "";
		}
		screen.value += v;
	}
	
}

利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。

获取到触发事件元素的具体值之后，判断元素值是否等于“=”和“C”，这两个按钮是做区别于普通字符串拼接及计算的其他功能。

C做清屏处理：判断触发事件的按钮值是否为C，若为C，屏幕中只显示0；

=做计算处理：判断触发事件的按钮值是否为=，若为=，利用eval()方法计算屏幕上的公式；

其他触发事件的按钮直接做字符串拼接显示在屏幕上。

六、动图效果

 

今天的分享就到这里啦！欢迎指正！！！