Web开发基础-JavaScript-27

JS中获取事件源的练习案例
案例思路：
案例演示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<style type="text/css">
			.panel {
				border:4px solid #ddd;
				width:192px;
				margin:100px auto;
				border-radius: 6px;/* 向  元素添加圆角边框： */
			}
			
			.panel p,.panel input {
				font-family:"微软雅黑";
				font-size:20px;
				margin:4px;
				float:left;
				border-radius:4px;
			}
			
			.panel p {
				width:122px;
				height:26px;
				border:1px solid #ddd;
				padding:6px;
				overflow: hidden;
			}
			
			.panel input {
				width:40px;
				height:40px;
				border:1px solid #ddd;
			}
		</style>
		<script type="text/javascript">
			function cal(e){
				//获取事件源(DIV/P/INPUT)
				var obj = e.srcElement||e.target;
				//筛选出INPUT
				if(obj.nodeName != "INPUT"){
					return;
				}
				//判断是什么按钮（C/=/其他）
				var p = document.getElementById("screen");
				if(obj.value=="C"){
					//清空
					p.innerHTML = "";
				}else if(obj.value=="="){
					//计算
					try{
						var result = eval(p.innerHTML);
						p.innerHTML = result;
					}catch(ex){
						p.innerHTML = "Error";
					}
					
				}else{
					//累加
					var ss = p.innerHTML + obj.value;
					p.innerHTML = ss;
				}
			}
		
		</script>
	</head>
	<body>
		<!-- 显示区 -->
		<div class="panel" onclick="cal(event);">
			<div>
				<p id="screen"></p>
				<input type="button" value="C">
				<div style="clear:both"></div>
			</div>
		
		
		<!-- 计算区 -->
		<div>
			<input type="button" value="7">
			<input type="button" value="8">
			<input type="button" value="9">
			<input type="button" value="/">
			
			<input type="button" value="4">
			<input type="button" value="5">
			<input type="button" value="6">
			<input type="button" value="*">
			
			<input type="button" value="1">
			<input type="button" value="2">
			<input type="button" value="3">
			<input type="button" value="-">
			
			<input type="button" value="0">
			<input type="button" value=".">
			<input type="button" value="=">
			<input type="button" value="+">
			
			<div style="clear:both"></div>
		</div>
	</div>
	</body>

</html>
最终页面显示效果：点击对应数值再点击"="即可计算显示结果
Web开发基础-JavaScript-27

猜你喜欢
